sea-dev 1.0.0

package/libs/ui/src/components/doc-viewers/image/index.tsx

@@ -0,0 +1,410 @@
+import type {
+  CitationRef,
+  ExtractionInfo,
+  SourceAnnotation,
+  SourceDocument,
+} from "@sea/core/data-extraction/types";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@sea/ui/components/ui/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@sea/ui/components/ui/popover";
+import { H3 } from "@sea/ui/components/ui/typography";
+import { cn } from "@sea/ui/lib/utils";
+import { JSONPath } from "jsonpath-plus";
+import { CheckCircle2, ChevronDownIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
+import type { CSSProperties } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+type ImageDoc = SourceDocument & {
+  citations?: ExtractionInfo["citations"];
+  extractedData?: ExtractionInfo["extractedData"];
+  displayType?: ExtractionInfo["displayType"];
+};
+
+const zoomLevels = ["50%", "80%", "100%", "130%", "150%", "175%", "200%", "300%", "400%"];
+const startZoomLevelIdx = 2; // 100%
+
+export interface AnnotationFocus {
+  activeAnnotationKey?: string;
+  activeCitationId?: string;
+}
+
+export function ImageViewer({
+  image,
+  refreshUrl,
+  annotations,
+  annotationFocus,
+  onSelectCitation,
+}: {
+  image: ImageDoc;
+  refreshUrl?: () => Promise<void>;
+  annotations?: SourceAnnotation[];
+  annotationFocus?: AnnotationFocus;
+  onSelectCitation?: (citationId: string, annotationKey: string) => void;
+}) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const imgRef = useRef<HTMLImageElement | null>(null);
+  const [natural, setNatural] = useState<{ w: number; h: number } | null>(null);
+  const [fitScale, setFitScale] = useState(1);
+  const [scale, setScale] = useState(1);
+  const [zoomLevelIdx, setZoomLevelIdx] = useState(startZoomLevelIdx);
+  const [loadError, setLoadError] = useState(false);
+
+  const percentToScale = (percent: string) => parseInt(percent, 10) / 100;
+  const toPercentPlusBase = (n: number) => `${Math.round((100 + n * 100) * 10) / 10}%`;
+
+  // Compute fit scale whenever container or image natural size changes
+  const recomputeFit = useCallback(() => {
+    const c = containerRef.current;
+    if (!c || !natural) return;
+    const paddingHorizontal = 20; // mirror PDF virtualized padding
+    const availableW = Math.max(0, c.clientWidth - paddingHorizontal);
+    const s = natural.w > 0 ? availableW / natural.w : 1;
+    setFitScale(s);
+  }, [natural]);
+
+  // Resize observer for container
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const ro = new ResizeObserver(() => recomputeFit());
+    ro.observe(containerRef.current);
+    return () => ro.disconnect();
+  }, [recomputeFit]);
+
+  // When fitScale changes, align current scale to fit (preserve zoom delta via zoomLevelIdx)
+  useEffect(() => {
+    setScale(fitScale + (percentToScale(zoomLevels[zoomLevelIdx]!) - 1));
+  }, [fitScale]);
+
+  const setZoomLevel = useCallback(
+    (level: string) => {
+      const idx = zoomLevels.indexOf(level);
+      setZoomLevelIdx(idx);
+      setScale(fitScale + percentToScale(level) - 1);
+    },
+    [fitScale],
+  );
+
+  const handleZoomIn = useCallback(() => {
+    const next = Math.min(zoomLevels.length - 1, zoomLevelIdx + 1);
+    setZoomLevel(zoomLevels[next]!);
+  }, [zoomLevelIdx, setZoomLevel]);
+
+  const handleZoomOut = useCallback(() => {
+    const next = Math.max(0, zoomLevelIdx - 1);
+    setZoomLevel(zoomLevels[next]!);
+  }, [zoomLevelIdx, setZoomLevel]);
+
+  const scaleDiff = useMemo(() => Math.round((scale - fitScale) * 10) / 10, [scale, fitScale]);
+  const scaleText = toPercentPlusBase(scaleDiff);
+
+  const computedAnnotations = useMemo(() => {
+    if (annotations) return annotations;
+    if (!image.citations || !image.extractedData) return [];
+
+    const annotationsBySource: { [key: string]: SourceAnnotation } = {};
+    const { citations } = image;
+
+    if (image.displayType === "new") {
+      for (const c of citations) {
+        for (const [key, boundingRegions] of Object.entries(c.boundingRegions)) {
+          if (!annotationsBySource[key]) {
+            annotationsBySource[key] = {
+              key,
+              boundingRegions,
+              linkedCitations: [],
+            };
+          }
+          const value = JSONPath({ path: c.path, json: image.extractedData })[0];
+          annotationsBySource[key].linkedCitations.push({
+            id: c.id,
+            sourceRef: c.sourceRef,
+            path: c.path,
+            value: value ?? "",
+          });
+        }
+      }
+    } else {
+      for (const c of citations) {
+        for (const [key, boundingRegions] of Object.entries(c.boundingRegions)) {
+          if (!annotationsBySource[key]) {
+            annotationsBySource[key] = {
+              key,
+              boundingRegions: boundingRegions.map((br) => ({
+                ...br,
+                polygon: [
+                  br.polygon[0] / 8.27,
+                  br.polygon[1] / 11.69,
+                  br.polygon[2] / 8.27,
+                  br.polygon[3] / 11.69,
+                  br.polygon[4] / 8.27,
+                  br.polygon[5] / 11.69,
+                  br.polygon[6] / 8.27,
+                  br.polygon[7] / 11.69,
+                ],
+              })),
+              linkedCitations: [],
+            };
+          }
+          annotationsBySource[key].linkedCitations.push({
+            id: c.id,
+            sourceRef: c.sourceRef,
+            path: c.path,
+            value: "",
+          });
+        }
+      }
+    }
+
+    return Object.values(annotationsBySource);
+  }, [annotations, image]);
+
+  const highlights = useMemo(() => {
+    if (!natural || !computedAnnotations) return [];
+    // Assume page 1 for image
+    const pageIndex = 0;
+    return computedAnnotations
+      .filter((a) => a.boundingRegions?.map((r) => r.pageNumber - 1).includes(pageIndex))
+      .flatMap((a) =>
+        a.boundingRegions
+          .filter((r) => r.pageNumber - 1 === pageIndex)
+          .map((r) => ({
+            key: a.key,
+            left: r.polygon[0] * natural.w * scale,
+            top: r.polygon[1] * natural.h * scale,
+            width: (r.polygon[2] - r.polygon[0]) * natural.w * scale,
+            height: (r.polygon[5] - r.polygon[1]) * natural.h * scale,
+            linkedCitations: a.linkedCitations,
+          })),
+      );
+  }, [computedAnnotations, natural, scale]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative flex h-full w-full flex-1 items-center justify-center"
+    >
+      <div className="absolute top-2 right-5 z-10 flex rounded-lg shadow-md">
+        <ImageZoomControls
+          scaleText={scaleText}
+          handleZoomIn={handleZoomIn}
+          handleZoomOut={handleZoomOut}
+          setZoomLevel={setZoomLevel}
+          zoomInEnabled={zoomLevelIdx < zoomLevels.length - 1}
+          zoomOutEnabled={zoomLevelIdx > 0}
+        />
+      </div>
+      {loadError ? (
+        <div className="mt-20 flex flex-col items-center gap-4">
+          <H3>Image failed to load...</H3>
+          {refreshUrl && (
+            <Button
+              variant="outline"
+              extra="action"
+              onClick={async () => {
+                await refreshUrl();
+                setLoadError(false);
+              }}
+            >
+              Try again?
+            </Button>
+          )}
+        </div>
+      ) : (
+        <div className="relative max-h-full max-w-full overflow-auto">
+          <img
+            ref={imgRef}
+            src={image.url ?? undefined}
+            alt={image.name}
+            onLoad={(e) => {
+              const el = e.currentTarget;
+              setNatural({ w: el.naturalWidth, h: el.naturalHeight });
+              // Defer to allow container size to settle, then compute fit
+              setTimeout(recomputeFit, 0);
+            }}
+            onError={() => setLoadError(true)}
+            style={{
+              width: natural ? natural.w * scale : undefined,
+              height: natural ? natural.h * scale : undefined,
+              objectFit: "contain",
+              display: "block",
+            }}
+          />
+          {highlights.map((hl, hlIndex) => {
+            const { activeCitationId, activeAnnotationKey } = annotationFocus || {};
+            const isFocused = activeAnnotationKey === hl.key;
+            const isActive = activeCitationId
+              ? hl.linkedCitations.map((c) => c.id).includes(activeCitationId)
+              : false;
+
+            return (
+              <Highlight
+                key={`hl-${hl.key}-${hlIndex}`}
+                linkedCitations={hl.linkedCitations}
+                annotationKey={hl.key}
+                activeCitationId={activeCitationId}
+                onSelectCitation={onSelectCitation}
+                style={{
+                  position: "absolute",
+                  left: `${hl.left - 1}px`,
+                  top: `${hl.top - 1}px`,
+                  width: `${hl.width + 2}px`,
+                  height: `${hl.height + 2}px`,
+                }}
+                isActive={isActive}
+                isFocused={isFocused}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ImageZoomControls({
+  scaleText,
+  handleZoomIn,
+  handleZoomOut,
+  setZoomLevel,
+  zoomInEnabled,
+  zoomOutEnabled,
+}: {
+  scaleText: string;
+  handleZoomIn: () => void;
+  handleZoomOut: () => void;
+  setZoomLevel: (percent: string) => void;
+  zoomInEnabled: boolean;
+  zoomOutEnabled: boolean;
+}) {
+  const handleZoomSelection = (zoom: string) => setZoomLevel(zoom);
+  return (
+    <div className="flex items-center justify-around p-1">
+      <Button variant="ghost" size="icon" onClick={handleZoomOut} disabled={!zoomOutEnabled}>
+        <ZoomOutIcon />
+      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost">
+            {scaleText}
+            <ChevronDownIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          {zoomLevels.map((zoom) => (
+            <DropdownMenuItem key={zoom} onClick={() => handleZoomSelection(zoom)}>
+              {zoom}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Button variant="ghost" size="icon" onClick={handleZoomIn} disabled={!zoomInEnabled}>
+        <ZoomInIcon />
+      </Button>
+    </div>
+  );
+}
+
+export default ImageViewer;
+
+function Highlight({
+  linkedCitations,
+  annotationKey,
+  activeCitationId,
+  onSelectCitation,
+  style,
+  isActive,
+  isFocused,
+}: {
+  linkedCitations: CitationRef[];
+  annotationKey: string;
+  activeCitationId?: string;
+  onSelectCitation?: (citationId: string, annotationKey: string) => void;
+  style?: CSSProperties;
+  isActive?: boolean;
+  isFocused?: boolean;
+}) {
+  const renderRef = (ref: CitationRef) => {
+    const pathSegments = ref.path.split(".");
+    const fieldName = pathSegments.slice(-1).join(".");
+
+    return (
+      <div className="flex flex-col gap-0.5">
+        <span className="font-mono text-[10px] tracking-wide text-nowrap text-stone-500 dark:text-stone-300">
+          {fieldName}
+        </span>
+        {ref.value !== undefined && ref.value !== null && (
+          <span className="max-w-md text-xs font-semibold whitespace-normal text-stone-700 dark:text-stone-100">
+            {ref.value}
+          </span>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <Popover open={isFocused}>
+      <PopoverTrigger asChild>
+        <div className="relative" style={style}>
+          <span
+            role="button"
+            tabIndex={0}
+            className={cn(
+              "block h-full w-full overflow-hidden rounded select-none",
+              onSelectCitation ? "cursor-pointer" : "cursor-default",
+              isActive ? "bg-rose-500/25" : "bg-blue-500/20",
+              isFocused ? "border-2 border-rose-600/90" : "",
+            )}
+            onClick={() => {
+              const firstCitation = linkedCitations[0];
+              if (!firstCitation) return;
+              onSelectCitation?.(firstCitation.id, annotationKey);
+            }}
+            onBlur={() => {
+              onSelectCitation?.("", "");
+            }}
+          />
+        </div>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-64 p-0"
+        align="start"
+        side="bottom"
+        sideOffset={5}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        onCloseAutoFocus={(e) => e.preventDefault()}
+      >
+        <div className="flex flex-col gap-1 rounded-md bg-white pt-2 pb-1 dark:bg-stone-900">
+          <div className="flex max-h-60 flex-col overflow-y-auto">
+            {linkedCitations.map((c) => {
+              const isActive = activeCitationId === c.id;
+              return (
+                <button
+                  key={c.id}
+                  type="button"
+                  className={cn(
+                    "flex w-full items-start gap-1.5 px-2 py-1.5 text-left text-stone-700 transition-all hover:bg-stone-100 focus-visible:ring-2 focus-visible:ring-rose-400 focus-visible:outline-none dark:text-stone-100 dark:hover:bg-stone-800",
+                    isActive
+                      ? "border-l-2 border-rose-500 bg-rose-50 dark:bg-rose-500/10"
+                      : "border-l-2 border-transparent",
+                  )}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onSelectCitation?.(c.id, annotationKey);
+                  }}
+                >
+                  {isActive && <CheckCircle2 className="mt-0.5 h-3 w-3 shrink-0 text-rose-500" />}
+                  <div className={cn("flex-1", isActive ? "" : "pl-4")}>{renderRef(c)}</div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/libs/ui/src/components/doc-viewers/pdf/index.tsx

@@ -0,0 +1,258 @@
+import type { ExtractionInfo, SourceAnnotation } from "@sea/core/data-extraction/types";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@sea/ui/components/ui/dropdown-menu";
+import { Tabs, TabsList, TabsTrigger } from "@sea/ui/components/ui/tabs";
+import { JSONPath } from "jsonpath-plus";
+import { ChevronDownIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { MemoizedVirtualizedPDF, type PdfFocusHandle } from "./virtualized-pdf";
+
+const zoomLevels = ["50%", "80%", "100%", "130%", "150%", "175%", "200%", "300%", "400%"] as const;
+const startZoomLevelIdx = 2;
+
+function percentToScale(percent: string | undefined): number {
+  if (typeof percent !== "string") return 1;
+  const trimmed = percent.trim();
+  const numeric = parseFloat(trimmed.replace(/%$/, ""));
+  if (!Number.isFinite(numeric) || numeric <= 0) return 1;
+  return numeric / 100;
+}
+
+const toPercentPlusBase = (n: number) => {
+  return `${100 + n * 100}%`;
+};
+
+export interface PdfTab {
+  id: string;
+  label: string;
+  pageNumbers?: number[]; // 1-indexed
+}
+
+export const PdfViewer = ({
+  pdfInfo,
+  activeAnnotationKey,
+  activeCitationId,
+  onSelectCitation,
+  refreshPdfUrl,
+  tabs,
+}: {
+  pdfInfo: ExtractionInfo;
+  activeAnnotationKey?: string;
+  activeCitationId?: string;
+  onSelectCitation?: (citationId: string, annotationKey: string) => void;
+  refreshPdfUrl?: () => Promise<void>;
+  tabs?: PdfTab[];
+}) => {
+  const [pageIndex, setPageIndex] = useState(1);
+  const [scale, setScale] = useState(1.0);
+  const [scaleFit, setScaleFit] = useState(1.0);
+  const [zoomLevelIdx, setZoomLevelIdx] = useState(startZoomLevelIdx);
+  const [activeTabId, setActiveTabId] = useState<string>("all");
+  const pdfFocusHandleRef = useRef<PdfFocusHandle | null>(null);
+  const [isPdfReady, setIsPdfReady] = useState(false);
+
+  useEffect(() => {
+    setIsPdfReady(false);
+  }, [pdfInfo.documentExtractionId]);
+
+  useEffect(() => {
+    if (!tabs || tabs.length === 0) return;
+
+    const currentIsValid = tabs.some((tab) => tab.id === activeTabId);
+    if (!currentIsValid) {
+      setActiveTabId(tabs[0]?.id ?? "all");
+    }
+  }, [tabs, activeTabId]);
+
+  const annotations = useMemo(() => {
+    const annotationsBySource: { [key: string]: SourceAnnotation } = {};
+    const { citations, extractedData } = pdfInfo;
+    const jsonPathCache = new Map<string, unknown>();
+
+    for (const c of citations) {
+      for (const [key, boundingRegions] of Object.entries(c.boundingRegions)) {
+        if (!annotationsBySource[key]) {
+          annotationsBySource[key] = {
+            key,
+            boundingRegions,
+            linkedCitations: [],
+          };
+        }
+
+        let value = "";
+        if (!jsonPathCache.has(c.path)) {
+          try {
+            const result = JSONPath({
+              path: c.path,
+              json: extractedData,
+              wrap: false,
+            });
+            jsonPathCache.set(c.path, result);
+            value = result;
+          } catch (error) {
+            console.warn("Error getting value for path", c.path, error);
+            jsonPathCache.set(c.path, "");
+          }
+        } else {
+          value = jsonPathCache.get(c.path) as string;
+        }
+
+        const linkedCitation = {
+          id: c.id,
+          sourceRef: c.sourceRef,
+          path: c.path,
+          value,
+        };
+
+        annotationsBySource[key]?.linkedCitations.push(linkedCitation);
+      }
+    }
+
+    return Object.values(annotationsBySource);
+  }, [pdfInfo]);
+
+  const annotationFocus = useMemo(() => {
+    return {
+      activeAnnotationKey,
+      activeCitationId,
+    };
+  }, [activeAnnotationKey, activeCitationId]);
+
+  useEffect(() => {
+    if (!activeAnnotationKey || !isPdfReady) return;
+
+    // PDF is ready and items are rendered, scroll to annotation
+    pdfFocusHandleRef.current?.scrollToAnnotation(activeAnnotationKey);
+  }, [activeAnnotationKey, pdfInfo.documentExtractionId, isPdfReady]);
+
+  const handleZoomIn = useCallback(() => {
+    const nextLevel = zoomLevelIdx + 1;
+    if (nextLevel >= zoomLevels.length) return;
+    setZoomLevelIdx(nextLevel);
+  }, [zoomLevelIdx]);
+
+  const handleZoomOut = useCallback(() => {
+    const nextLevel = zoomLevelIdx - 1;
+    if (nextLevel < 0) return;
+    setZoomLevelIdx(nextLevel);
+  }, [zoomLevelIdx]);
+
+  const handleZoomSelection = useCallback((zoomLevelIdx: number) => {
+    setZoomLevelIdx(zoomLevelIdx);
+  }, []);
+
+  const scaleDiff = Math.round((scale - scaleFit) * 10) / 10;
+  const scaleText = toPercentPlusBase(scaleDiff);
+
+  useEffect(() => {
+    const currentZoomLevel = zoomLevels[zoomLevelIdx] ?? zoomLevels[startZoomLevelIdx] ?? "100%";
+    const zoomScale = percentToScale(currentZoomLevel);
+    const next = scaleFit + zoomScale - 1;
+    setScale(Number.isFinite(next) ? next : 1);
+  }, [scaleFit, zoomLevelIdx, zoomLevels, startZoomLevelIdx]);
+
+  const zoomInEnabled = zoomLevelIdx < zoomLevels.length - 1;
+  const zoomOutEnabled = zoomLevelIdx > 0;
+
+  const activeTab = tabs?.find((t) => t.id === activeTabId);
+  const visiblePageNumbers = activeTab?.pageNumbers;
+
+  return (
+    <div className="relative flex h-full w-full flex-1 grow flex-col justify-center">
+      {tabs && tabs.length > 1 && (
+        <div className="border-b border-stone-200 bg-white dark:border-stone-700 dark:bg-stone-900">
+          <Tabs value={activeTabId} onValueChange={setActiveTabId}>
+            <div className="w-full overflow-x-auto">
+              <TabsList className="h-10 min-w-max justify-start gap-1 rounded-none border-b-0 bg-transparent p-0 px-4">
+                {tabs.map((tab) => (
+                  <TabsTrigger
+                    key={tab.id}
+                    value={tab.id}
+                    className="data-[state=active]:bg-brand-100 data-[state=active]:text-brand-900 dark:data-[state=active]:bg-brand-900 dark:data-[state=active]:text-brand-100 relative h-9 flex-none rounded-t-md border-b-2 border-transparent bg-transparent px-4 text-sm font-medium text-stone-600 shadow-none transition-all hover:bg-stone-100 hover:text-stone-900 data-[state=active]:border-transparent data-[state=active]:shadow-none dark:text-stone-400 dark:hover:bg-stone-800 dark:hover:text-stone-100 dark:data-[state=active]:border-transparent"
+                  >
+                    {tab.label}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </div>
+          </Tabs>
+        </div>
+      )}
+      <div className="relative flex w-full flex-1 grow flex-col justify-center">
+        <div className="absolute top-2 right-5 z-10 flex rounded-lg border border-white/60 bg-white/90 shadow-md backdrop-blur dark:border-stone-700/80 dark:bg-stone-900/90">
+          {scaleText && (
+            <PDFZoomControls
+              scaleText={scaleText}
+              handleZoomIn={handleZoomIn}
+              handleZoomOut={handleZoomOut}
+              onZoomSelection={handleZoomSelection}
+              zoomInEnabled={zoomInEnabled}
+              zoomOutEnabled={zoomOutEnabled}
+            />
+          )}
+        </div>
+        <MemoizedVirtualizedPDF
+          key={pdfInfo.documentExtractionId}
+          ref={pdfFocusHandleRef}
+          pdf={pdfInfo}
+          annotations={annotations}
+          annotationFocus={annotationFocus}
+          onSelectCitation={onSelectCitation}
+          scale={scale}
+          setIndex={setPageIndex}
+          setScaleFit={setScaleFit}
+          refreshPdfUrl={refreshPdfUrl}
+          visiblePageNumbers={visiblePageNumbers}
+          onReady={() => setIsPdfReady(true)}
+        />
+      </div>
+    </div>
+  );
+};
+
+const PDFZoomControls = ({
+  scaleText,
+  handleZoomIn,
+  handleZoomOut,
+  onZoomSelection,
+  zoomInEnabled,
+  zoomOutEnabled,
+}: {
+  scaleText: string;
+  handleZoomIn: () => void;
+  handleZoomOut: () => void;
+  onZoomSelection: (zoomLevelIdx: number) => void;
+  zoomInEnabled: boolean;
+  zoomOutEnabled: boolean;
+}) => {
+  return (
+    <div className="flex items-center justify-around p-1">
+      <Button variant="ghost" size="icon" onClick={handleZoomOut} disabled={!zoomOutEnabled}>
+        <ZoomOutIcon />
+      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost">
+            {scaleText}
+            <ChevronDownIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          {zoomLevels.map((zoom, idx) => (
+            <DropdownMenuItem key={zoom} onClick={() => onZoomSelection(idx)}>
+              {zoom}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Button variant="ghost" size="icon" onClick={handleZoomIn} disabled={!zoomInEnabled}>
+        <ZoomInIcon />
+      </Button>
+    </div>
+  );
+};