feat: updates to row viewer panel (#4866)

## 📝 Summary

<!--
Provide a concise summary of what this pull request is addressing.

If this PR fixes any issues, list them here by number (e.g., Fixes
#123).
-->

![image](https://github.com/user-attachments/assets/c31e3273-af1a-42e7-b4ae-f6124f1cad5c)
- Change to Row viewer panel
- Adds cell-aware config
- Keyboard shortcuts when element is active

open to name/tooltip suggestions. Context-aware(?), reactive, adaptive

## 🔍 Description of Changes

<!--
Detail the specific changes made in this pull request. Explain the
problem addressed and how it was resolved. If applicable, provide before
and after comparisons, screenshots, or any relevant details to help
reviewers understand the changes easily.
-->

## 📋 Checklist

- [X] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [ ] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [ ] I have added tests for the changes made.
- [X] I have run the code and verified that it works as expected.

## 📜 Reviewers

<!--
Tag potential reviewers from the community or maintainers who might be
interested in reviewing this pull request.

Your PR will be reviewed more quickly if you can figure out the right
person to tag with @ -->

@mscolnick

Author: Light2Dark

frontend/src/components/data-table/TableActions.tsx

@@ -27,8 +27,8 @@ interface TableActionsProps<TData> {
   getRowIds?: GetRowIds;
   toggleDisplayHeader?: () => void;
   chartsFeatureEnabled?: boolean;
-  toggleSelectionPanel?: () => void;
-  isSelectionPanelOpen?: boolean;
+  toggleRowViewerPanel?: () => void;
+  isRowViewerPanelOpen?: boolean;
 }
 
 export const TableActions = <TData,>({
@@ -45,8 +45,8 @@ export const TableActions = <TData,>({
   getRowIds,
   toggleDisplayHeader,
   chartsFeatureEnabled,
-  toggleSelectionPanel,
-  isSelectionPanelOpen,
+  toggleRowViewerPanel,
+  isRowViewerPanelOpen,
 }: TableActionsProps<TData>) => {
   const handleSelectAllRows = (value: boolean) => {
     if (!onRowSelectionChange) {
@@ -118,13 +118,13 @@ export const TableActions = <TData,>({
           </Button>
         </Tooltip>
       )}
-      {toggleSelectionPanel && (
-        <Tooltip content="Toggle selection panel">
-          <Button variant="text" size="xs" onClick={toggleSelectionPanel}>
+      {toggleRowViewerPanel && (
+        <Tooltip content="Toggle row viewer">
+          <Button variant="text" size="xs" onClick={toggleRowViewerPanel}>
             <PanelRightIcon
               className={cn(
                 "w-4 h-4 text-muted-foreground",
-                isSelectionPanelOpen && "text-primary",
+                isRowViewerPanelOpen && "text-primary",
               )}
             />
           </Button>

frontend/src/components/data-table/data-table.tsx

@@ -79,8 +79,8 @@ interface DataTableProps<TData> extends Partial<DownloadActionProps> {
   onFocusRowChange?: OnChangeFn<number>;
   // Others
   chartsFeatureEnabled?: boolean;
-  toggleSelectionPanel?: () => void;
-  isSelectionPanelOpen?: boolean;
+  toggleRowViewerPanel?: () => void;
+  isRowViewerPanelOpen?: boolean;
 }
 
 const DataTableInternal = <TData,>({
@@ -116,8 +116,8 @@ const DataTableInternal = <TData,>({
   freezeColumnsRight,
   toggleDisplayHeader,
   chartsFeatureEnabled,
-  toggleSelectionPanel,
-  isSelectionPanelOpen,
+  toggleRowViewerPanel,
+  isRowViewerPanelOpen,
   onFocusRowChange,
 }: DataTableProps<TData>) => {
   const [isSearchEnabled, setIsSearchEnabled] = React.useState<boolean>(false);
@@ -229,7 +229,7 @@ const DataTableInternal = <TData,>({
           {renderTableBody(
             table,
             columns,
-            isSelectionPanelOpen,
+            isRowViewerPanelOpen,
             getPaginatedRowIndex,
           )}
         </Table>
@@ -248,8 +248,8 @@ const DataTableInternal = <TData,>({
         getRowIds={getRowIds}
         toggleDisplayHeader={toggleDisplayHeader}
         chartsFeatureEnabled={chartsFeatureEnabled}
-        toggleSelectionPanel={toggleSelectionPanel}
-        isSelectionPanelOpen={isSelectionPanelOpen}
+        toggleRowViewerPanel={toggleRowViewerPanel}
+        isRowViewerPanelOpen={isRowViewerPanelOpen}
       />
     </div>
   );

frontend/src/components/data-table/selection-panel/__tests__/filter-rows.test.ts renamed to frontend/src/components/data-table/row-viewer-panel/__tests__/filter-rows.test.ts

@@ -1,7 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { describe, expect, it } from "vitest";
-import { filterRows } from "../data-selection";
+import { filterRows } from "../row-viewer";
 
 describe("filterRows", () => {
   const defaultRowValues = {

frontend/src/components/data-table/selection-panel/__tests__/data-selection.test.tsx renamed to frontend/src/components/data-table/row-viewer-panel/__tests__/row-viewer.test.tsx

@@ -2,7 +2,7 @@
 
 import { describe, expect, it, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
-import { DataSelectionPanel } from "../data-selection";
+import { RowViewerPanel } from "../row-viewer";
 import { Provider } from "jotai";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import type { GetRowResult } from "@/plugins/impl/DataTablePlugin";
@@ -16,7 +16,7 @@ const renderWithProviders = (component: React.ReactNode) => {
   );
 };
 
-describe("DataSelectionPanel", () => {
+describe("RowExpandedPanel", () => {
   const mockFieldTypes: FieldTypesWithExternalType = [
     ["name", ["string", "string"]],
     ["age", ["number", "number"]],
@@ -35,9 +35,9 @@ describe("DataSelectionPanel", () => {
 
   const mockSetRowIdx = vi.fn();
 
-  it("renders data in selection panel", async () => {
+  it("renders data in row viewer panel", async () => {
     renderWithProviders(
-      <DataSelectionPanel
+      <RowViewerPanel
         rowIdx={0}
         setRowIdx={mockSetRowIdx}
         totalRows={3}

frontend/src/components/data-table/selection-panel/data-selection.tsx renamed to frontend/src/components/data-table/row-viewer-panel/row-viewer.tsx

@@ -21,7 +21,7 @@ import {
 import { DATA_TYPE_ICON } from "@/components/datasets/icons";
 import { Input } from "@/components/ui/input";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import {
   INDEX_COLUMN_NAME,
@@ -34,23 +34,26 @@ import { NAMELESS_COLUMN_PREFIX } from "../columns";
 import { Banner, ErrorBanner } from "@/plugins/impl/common/error-banner";
 import type { Column } from "@tanstack/react-table";
 import { renderCellValue } from "../columns";
+import { useKeydownOnElement } from "@/hooks/useHotkey";
 
-export interface DataSelectionPanelProps {
+export interface RowViewerPanelProps {
   rowIdx: number;
   setRowIdx: (rowIdx: number) => void;
   totalRows: number;
   fieldTypes: FieldTypesWithExternalType | undefined | null;
   getRow: (rowIdx: number) => Promise<GetRowResult>;
 }
 
-export const DataSelectionPanel: React.FC<DataSelectionPanelProps> = ({
+export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
   rowIdx,
   setRowIdx,
   totalRows,
   fieldTypes,
   getRow,
-}: DataSelectionPanelProps) => {
+}: RowViewerPanelProps) => {
   const [searchQuery, setSearchQuery] = useState("");
+  const panelRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
 
   const { data: rows, error } = useAsyncData(async () => {
     const data = await getRow(rowIdx);
@@ -64,6 +67,21 @@ export const DataSelectionPanel: React.FC<DataSelectionPanelProps> = ({
     setRowIdx(rowIdx);
   };
 
+  useKeydownOnElement(panelRef, {
+    ArrowLeft: (e) => {
+      if (e?.target === searchInputRef.current) {
+        return false;
+      }
+      handleSelectRow(rowIdx - 1);
+    },
+    ArrowRight: (e) => {
+      if (e?.target === searchInputRef.current) {
+        return false;
+      }
+      handleSelectRow(rowIdx + 1);
+    },
+  });
+
   const buttonStyles = "h-6 w-6 p-0.5";
 
   const renderTable = () => {
@@ -125,7 +143,7 @@ export const DataSelectionPanel: React.FC<DataSelectionPanelProps> = ({
     const filteredRows = filterRows(rowValues, searchQuery);
 
     return (
-      <Table>
+      <Table className="mb-4">
         <TableHeader>
           <TableRow>
             <TableHead className="w-1/4">Column</TableHead>
@@ -188,7 +206,11 @@ export const DataSelectionPanel: React.FC<DataSelectionPanelProps> = ({
   };
 
   return (
-    <div className="flex flex-col gap-3 mt-4">
+    <div
+      className="flex flex-col gap-3 mt-4 focus:outline-none"
+      ref={panelRef}
+      tabIndex={-1}
+    >
       <div className="flex flex-row gap-2 justify-end items-center mr-2">
         <Button
           variant="outline"
@@ -236,6 +258,7 @@ export const DataSelectionPanel: React.FC<DataSelectionPanelProps> = ({
 
       <div className="mx-2 -mb-1">
         <Input
+          ref={searchInputRef}
           type="text"
           placeholder="Search"
           onChange={(e) => setSearchQuery(e.target.value)}

frontend/src/components/data-table/row-viewer-panel/use-panel-ownership.ts

@@ -0,0 +1,92 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { useAtom, useAtomValue } from "jotai";
+import { Logger } from "@/utils/Logger";
+import type { CellId } from "@/core/cells/ids";
+import {
+  contextAwarePanelOpen,
+  contextAwarePanelOwner,
+  isCellAwareAtom,
+} from "@/components/editor/chrome/panels/context-aware-panel/atoms";
+import { lastFocusedCellIdAtom } from "@/core/cells/focus";
+
+interface PanelOwnershipResult {
+  isPanelOpen: boolean;
+  togglePanel: () => void;
+}
+
+export function usePanelOwnership(
+  id: string,
+  cellId?: CellId | null,
+): PanelOwnershipResult {
+  let isPanelCellAware = useAtomValue(isCellAwareAtom);
+  const [lastFocusedCellId, setLastFocusedCellId] = useAtom(
+    lastFocusedCellIdAtom,
+  );
+  const [panelOwner, setPanelOwner] = useAtom(contextAwarePanelOwner);
+  const [isContextAwarePanelOpen, setContextAwarePanelOpen] = useAtom(
+    contextAwarePanelOpen,
+  );
+  const panelId = getPanelId(id, cellId);
+
+  if (!cellId && isPanelCellAware) {
+    Logger.error("CellId is not found, defaulting to fixed mode");
+    isPanelCellAware = false;
+  }
+
+  const isPanelOpen = panelOwner === panelId && isContextAwarePanelOpen;
+
+  const thisCellIsFocused = lastFocusedCellId === cellId;
+  const currentOwnerIsInThisCell =
+    panelOwner && isPanelOwner(panelOwner, cellId);
+
+  // In cell-aware mode, update panel owner when cell is focused
+  // Only set panel owner if no other table in this cell is currently the owner
+  if (
+    isPanelCellAware &&
+    thisCellIsFocused &&
+    panelOwner !== panelId &&
+    !currentOwnerIsInThisCell
+  ) {
+    setPanelOwner(panelId);
+  }
+
+  function togglePanel() {
+    if (isPanelOpen) {
+      setPanelOwner(null);
+      setContextAwarePanelOpen(false);
+    } else {
+      setPanelOwner(panelId);
+      // if cell-aware, we want to focus on this cell when toggled open
+      if (isPanelCellAware && cellId) {
+        setLastFocusedCellId(cellId);
+      }
+      setContextAwarePanelOpen(true);
+    }
+  }
+
+  return {
+    isPanelOpen: isPanelOpen,
+    togglePanel: togglePanel,
+  };
+}
+
+/**
+ * Get the unique ID for the panel based on the cell ID.
+ * If the cell ID is not provided, the panel ID is just the table ID.
+ */
+function getPanelId(id: string, cellId?: CellId | null) {
+  if (cellId) {
+    return `${cellId}-${id}`;
+  }
+  return id;
+}
+
+/**
+ * Check if the panel is owned by the cell.
+ */
+function isPanelOwner(panelId: string, cellId?: CellId | null) {
+  if (cellId) {
+    return panelId.startsWith(cellId);
+  }
+  return false;
+}

frontend/src/components/editor/chrome/panels/context-aware-panel/atoms.ts

@@ -0,0 +1,25 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { atom } from "jotai";
+
+/**
+ * Unique ID of the owner rendering the context-aware panel.
+ */
+export const contextAwarePanelOwner = atom<string | null>(null);
+
+/**
+ * If true, the panel is open.
+ */
+export const contextAwarePanelOpen = atom<boolean>(false);
+
+/**
+ * If true, the panel is treated as part of the editor.
+ * When false, the panel overlays the editor content.
+ */
+export const isPinnedAtom = atom<boolean>(false);
+
+/**
+ * If true, the panel is cell-aware and will switch content based on the focused cell.
+ * Else, user needs to manually trigger content switch.
+ */
+export const isCellAwareAtom = atom<boolean>(false);