@marimo-team/frontend 0.21.2-dev92 → 0.21.2-dev94

package/src/components/editor/chrome/panels/context-aware-panel/context-aware-panel.tsx

@@ -21,7 +21,12 @@ import {
   isPinnedAtom,
 } from "./atoms";
 
-export type PanelType = "row-viewer" | "column-explorer";
+export const PANEL_TYPES = {
+  ROW_VIEWER: "row-viewer",
+  COLUMN_EXPLORER: "column-explorer",
+} as const;
+
+export type PanelType = (typeof PANEL_TYPES)[keyof typeof PANEL_TYPES];
 
 export const ContextAwarePanel: React.FC = () => {
   const [owner, setOwner] = useAtom(contextAwarePanelOwner);
@@ -51,7 +56,7 @@ export const ContextAwarePanel: React.FC = () => {
             aria-label={isPinned ? "Unpin panel" : "Pin panel"}
           >
             {isPinned ? (
-              <PinIcon className="w-4 h-4" />
+              <PinIcon className="w-4 h-4 text-primary" />
             ) : (
               <PinOffIcon className="w-4 h-4" />
             )}
@@ -95,16 +100,18 @@ export const ContextAwarePanel: React.FC = () => {
 
   const renderBody = () => {
     return (
-      <div className="mt-2 pb-7 mb-4 h-full overflow-auto">
-        <div className="flex flex-row justify-between items-center mx-2">
+      <div className="pb-7 mb-4 h-full overflow-auto">
+        <div className="p-3 border-b flex justify-between items-center">
           {renderModeToggle()}
+          <Slot name={SlotNames.CONTEXT_AWARE_PANEL_HEADER} />
           <Button
-            variant="linkDestructive"
-            size="icon"
+            variant="text"
+            size="xs"
+            className="m-0"
             onClick={closePanel}
             aria-label="Close selection panel"
           >
-            <XIcon className="w-4 h-4" />
+            <XIcon className="w-4 h-4 hover:text-destructive" />
           </Button>
         </div>
 
@@ -126,7 +133,7 @@ export const ContextAwarePanel: React.FC = () => {
         onDragging={handleDragging}
         className="resize-handle border-border z-20 print:hidden border-l"
       />
-      <Panel defaultSize={20} minSize={15} maxSize={80}>
+      <Panel defaultSize={25} minSize={25} maxSize={80}>
         {renderBody()}
       </Panel>
     </>
@@ -150,7 +157,7 @@ interface ResizableComponentProps {
 const ResizableComponent = ({ children }: ResizableComponentProps) => {
   const { resizableDivRef, handleRefs, style } = useResizeHandle({
     startingWidth: 400,
-    minWidth: 300,
+    minWidth: 400,
     maxWidth: 1500,
     onResize: () => {
       raf2(() => {

package/src/components/editor/chrome/wrapper/footer-items/backend-status.tsx

@@ -1,7 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { atom, useAtomValue, useSetAtom } from "jotai";
-import { startCase } from "lodash-es";
 import { AlertCircleIcon, CheckCircle2Icon, PowerOffIcon } from "lucide-react";
 import type React from "react";
 import { Spinner } from "@/components/icons/spinner";
@@ -18,6 +17,7 @@ import {
 } from "@/core/websocket/connection-utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useInterval } from "@/hooks/useInterval";
+import { Strings } from "@/utils/strings";
 
 const CHECK_HEALTH_INTERVAL_MS = 30_000;
 
@@ -84,7 +84,7 @@ export const BackendConnectionStatus: React.FC = () => {
       return "Not connected to a runtime";
     }
 
-    const baseStatus = startCase(connection.toLowerCase());
+    const baseStatus = Strings.startCase(connection.toLowerCase());
     const healthInfo = data?.lastChecked
       ? data.isHealthy
         ? "✓ Healthy"

package/src/components/editor/connections/form-renderers.tsx

@@ -1,6 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { partition } from "lodash-es";
 import { KeyIcon, PlusCircleIcon } from "lucide-react";
 import { createContext, type ReactNode, use } from "react";
 import { z } from "zod";
@@ -28,6 +27,7 @@ import { Input } from "@/components/ui/input";
 import { NumberField } from "@/components/ui/number-field";
 import { SECRETS_REGISTRY } from "@/core/secrets/request-registry";
 import { useAsyncData } from "@/hooks/useAsyncData";
+import { partition } from "@/utils/arrays";
 import { cn } from "@/utils/cn";
 import { Functions } from "@/utils/functions";
 import {

package/src/components/editor/renderers/grid-layout/grid-layout.tsx

@@ -15,7 +15,6 @@ import type { GridLayout, GridLayoutCellSide } from "./types";
 import "react-grid-layout/css/styles.css";
 import "./styles.css";
 import { BorderAllIcon } from "@radix-ui/react-icons";
-import { startCase } from "lodash-es";
 import {
   AlignEndVerticalIcon,
   AlignHorizontalSpaceAroundIcon,
@@ -43,6 +42,7 @@ import { useIsDragging } from "@/hooks/useIsDragging";
 import { cn } from "@/utils/cn";
 import { Maps } from "@/utils/maps";
 import { Objects } from "@/utils/objects";
+import { Strings } from "@/utils/strings";
 
 type Props = ICellRendererProps<GridLayout>;
 
@@ -637,7 +637,7 @@ const GridHoverActions: React.FC<GridHoverActionsProps> = ({
           {Objects.entries(SIDE_TO_ICON).map(([option, Icon]) => (
             <DropdownMenuItem key={option} onSelect={() => setSide(option)}>
               <Icon className={"h-4 w-3 mr-2"} />
-              <span className="flex-1">{startCase(option)}</span>
+              <span className="flex-1">{Strings.startCase(option)}</span>
               {option === side && <CheckIcon className="h-4 w-4" />}
             </DropdownMenuItem>
           ))}

package/src/components/editor/renderers/layout-select.tsx

@@ -1,6 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { startCase } from "lodash-es";
 import {
   Grid3x3Icon,
   ListIcon,
@@ -21,6 +20,7 @@ import { getFeatureFlag } from "@/core/config/feature-flag";
 import { useLayoutActions, useLayoutState } from "@/core/layout/layout";
 import { isWasm } from "@/core/wasm/utils";
 import { logNever } from "@/utils/assertNever";
+import { Strings } from "@/utils/strings";
 import { LAYOUT_TYPES, type LayoutType } from "./types";
 
 export const LayoutSelect: React.FC = () => {
@@ -82,5 +82,5 @@ export function getLayoutIcon(layoutType: LayoutType) {
 }
 
 export function displayLayoutName(layoutType: LayoutType) {
-  return startCase(layoutType);
+  return Strings.startCase(layoutType);
 }

package/src/components/variables/variables-table.tsx

@@ -11,7 +11,6 @@ import {
   type SortingState,
   useReactTable,
 } from "@tanstack/react-table";
-import { sortBy } from "lodash-es";
 import { SquareEqualIcon, WorkflowIcon } from "lucide-react";
 import React, { memo, useMemo } from "react";
 import { useLocale } from "react-aria";
@@ -21,6 +20,7 @@ import type { CellId } from "@/core/cells/ids";
 import { isInternalCellName } from "@/core/cells/names";
 import { goToVariableDefinition } from "@/core/codemirror/go-to-definition/commands";
 import type { Variable, Variables } from "@/core/variables/types";
+import { sortBy } from "@/utils/arrays";
 import { cn } from "@/utils/cn";
 import { DataTableColumnHeader } from "../data-table/column-header";
 import { CellLinkList } from "../editor/links/cell-link-list";

package/src/core/cells/cells.ts

@@ -1,9 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { historyField } from "@codemirror/commands";
+import { dequal as isEqual } from "dequal";
 import { type Atom, atom, useAtom, useAtomValue } from "jotai";
 import { atomFamily, selectAtom, splitAtom } from "jotai/utils";
-import { isEqual } from "lodash-es";
 import { createRef, type ReducerWithoutAction } from "react";
 import type { CellHandle } from "@/components/editor/notebook-cell";
 import {

package/src/core/codemirror/rtc/extension.ts

@@ -2,8 +2,8 @@
 
 import type { Extension } from "@codemirror/state";
 import { EditorView, ViewPlugin } from "@codemirror/view";
+import { dequal as isEqual } from "dequal";
 import { atom } from "jotai";
-import { isEqual } from "lodash-es";
 import { Awareness, LoroDoc, LoroMap, LoroText } from "loro-crdt";
 import ReconnectingWebSocket from "partysocket/ws";
 import type { CellId } from "@/core/cells/ids";

package/src/core/network/requests-network.ts

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { once } from "lodash-es";
+import { once } from "@/utils/once";
 import { getRuntimeManager } from "../runtime/config";
 import { API, createClientWithRuntimeManager } from "./api";
 import { waitForConnectionOpen } from "./connection";

package/src/core/rtc/state.ts

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { atomWithStorage } from "jotai/utils";
-import { once } from "lodash-es";
+import { once } from "@/utils/once";
 import { jotaiJsonStorage } from "@/utils/storage/jotai";
 import { getFeatureFlag } from "../config/feature-flag";
 

package/src/core/saving/state.ts

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
+
+import { dequal as isEqual } from "dequal";
 import { atom } from "jotai";
-import { isEqual } from "lodash-es";
 import { arrayShallowEquals } from "@/utils/arrays";
 import { type NotebookState, notebookAtom } from "../cells/cells";
 import { type LayoutState, layoutStateAtom } from "../layout/layout";

package/src/core/slots/slots.ts

@@ -6,4 +6,5 @@ export const slotsController = new SlotzController();
 export const SlotNames = {
   SIDEBAR: "sidebar",
   CONTEXT_AWARE_PANEL: "context-aware-panel",
+  CONTEXT_AWARE_PANEL_HEADER: "context-aware-panel-header",
 };

package/src/core/state/jotai.ts

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
+
+import { dequal as isEqual } from "dequal";
 import { type Atom, atom, createStore, useStore } from "jotai";
-import { isEqual } from "lodash-es";
 import { useEffect } from "react";
 
 /**

package/src/plugins/impl/DataTablePlugin.tsx

@@ -26,7 +26,6 @@ import type { CellSelectionState } from "@/components/data-table/cell-selection/
 import type { CellStyleState } from "@/components/data-table/cell-styling/types";
 import { TablePanel } from "@/components/data-table/charts/charts";
 import { hasChart } from "@/components/data-table/charts/storage";
-import { ColumnExplorerPanel } from "@/components/data-table/column-explorer-panel/column-explorer";
 import { ColumnChartSpecModel } from "@/components/data-table/column-summary/chart-spec-model";
 import { ColumnChartContext } from "@/components/data-table/column-summary/column-summary";
 import {
@@ -35,11 +34,11 @@ import {
 } from "@/components/data-table/filters";
 import { usePanelOwnership } from "@/components/data-table/hooks/use-panel-ownership";
 import { LoadingTable } from "@/components/data-table/loading-table";
-import { RowViewerPanel } from "@/components/data-table/row-viewer-panel/row-viewer";
 import {
   type DownloadAsArgs,
   DownloadAsSchema,
 } from "@/components/data-table/schemas";
+import { TableExplorerPanel } from "@/components/data-table/table-explorer-panel/table-explorer-panel";
 import {
   type BinValues,
   type ColumnHeaderStats,
@@ -839,7 +838,8 @@ const DataTableComponent = ({
   }): JSX.Element => {
   const id = useId();
   const [viewedRowIdx, setViewedRowIdx] = useState(0);
-  const { isPanelOpen, togglePanel } = usePanelOwnership(id, cellId);
+  const { isPanelOpen, isAnyPanelOpen, togglePanel, panelType, setPanelType } =
+    usePanelOwnership(id, cellId);
 
   const chartSpecModel = useMemo(() => {
     if (!columnSummaries) {
@@ -1002,8 +1002,7 @@ const DataTableComponent = ({
   );
 
   const isSelectable = selection === "multi" || selection === "single";
-  const showColExplorer =
-    showColumnExplorer && preview_column && isPanelOpen("column-explorer");
+  const canShowColumnExplorer = showColumnExplorer && !!preview_column;
 
   const isInVscode = isInVscodeExtension();
 
@@ -1032,28 +1031,24 @@ const DataTableComponent = ({
         </Banner>
       )}
 
-      {isPanelOpen("row-viewer") && (
+      {isAnyPanelOpen && (showRowExplorer || canShowColumnExplorer) && (
         <ContextAwarePanelItem>
-          <RowViewerPanel
-            getRow={getRow}
-            fieldTypes={memoizedUnclampedFieldTypes}
-            totalRows={totalRows}
+          <TableExplorerPanel
             rowIdx={viewedRowIdx}
             setRowIdx={setViewedRow}
+            totalRows={totalRows}
+            fieldTypes={memoizedUnclampedFieldTypes}
+            getRow={getRow}
             isSelectable={isSelectable}
-            isRowSelected={rowSelection[viewedRowIdx]}
+            isRowSelected={Boolean(rowSelection[viewedRowIdx])}
             handleRowSelectionChange={handleRowSelectionChange}
-          />
-        </ContextAwarePanelItem>
-      )}
-      {showColExplorer && (
-        <ContextAwarePanelItem>
-          <ColumnExplorerPanel
             previewColumn={preview_column}
-            fieldTypes={memoizedUnclampedFieldTypes}
-            totalRows={totalRows}
             totalColumns={totalColumns}
             tableId={id}
+            showRowExplorer={showRowExplorer && !isInVscode}
+            showColumnExplorer={canShowColumnExplorer && !isInVscode}
+            activeTab={panelType}
+            onTabChange={setPanelType}
           />
         </ContextAwarePanelItem>
       )}
@@ -1099,11 +1094,13 @@ const DataTableComponent = ({
             showChartBuilder={showChartBuilder}
             showPageSizeSelector={showPageSizeSelector}
             // Hidden in VSCode (for now) because we don't have a panel to show
-            // the column/row explorer.
-            showColumnExplorer={showColumnExplorer && !isInVscode}
-            showRowExplorer={showRowExplorer && !isInVscode}
+            // the table explorer.
+            showTableExplorer={
+              (showRowExplorer || canShowColumnExplorer) && !isInVscode
+            }
             togglePanel={togglePanel}
             isPanelOpen={isPanelOpen}
+            isAnyPanelOpen={isAnyPanelOpen}
             viewedRowIdx={viewedRowIdx}
             onViewedRowChange={(rowIdx) => setViewedRowIdx(rowIdx)}
           />

package/src/plugins/impl/RangeSliderPlugin.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { isEqual } from "lodash-es";
+import { dequal as isEqual } from "dequal";
 import { type JSX, useEffect, useId, useState } from "react";
 import { useLocale } from "react-aria";
 import { z } from "zod";

package/src/plugins/impl/chat/chat-ui.tsx

@@ -10,7 +10,6 @@ import {
   type TextUIPart,
   type UIMessageChunk,
 } from "ai";
-import { startCase } from "lodash-es";
 import {
   BotMessageSquareIcon,
   HelpCircleIcon,
@@ -57,6 +56,7 @@ import {
 import { cn } from "@/utils/cn";
 import { Logger } from "@/utils/Logger";
 import { Objects } from "@/utils/objects";
+import { Strings } from "@/utils/strings";
 import { ErrorBanner } from "../common/error-banner";
 import type { PluginFunctions } from "./ChatPlugin";
 import type { ChatConfig } from "./types";
@@ -670,7 +670,7 @@ const ConfigPopup: React.FC<{
                 htmlFor={key}
                 className="flex w-full justify-between col-span-3 align-end"
               >
-                {startCase(key)}
+                {Strings.startCase(key)}
                 <Tooltip
                   delayDuration={200}
                   side="top"

package/src/plugins/impl/data-editor/components.tsx

@@ -1,6 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { capitalize } from "lodash-es";
 import { PencilIcon, PlusIcon } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
@@ -20,6 +19,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import type { DataType } from "@/core/kernel/messages";
+import { capitalize } from "@/utils/strings";
 
 interface RenameColumnSubProps {
   currentColumnName: string;

package/src/plugins/impl/data-explorer/components/query-form.tsx

@@ -5,7 +5,6 @@ import { ExpandedType } from "compassql/build/src/query/expandedtype";
 import { PrimitiveType, type Schema } from "compassql/build/src/schema";
 import { SHORT_WILDCARD } from "compassql/build/src/wildcard";
 import { useAtomValue } from "jotai";
-import { startCase } from "lodash-es";
 import { FunctionSquareIcon } from "lucide-react";
 import React from "react";
 import { Label } from "@/components/ui/label";
@@ -19,6 +18,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Strings } from "@/utils/strings";
 import type { EncodingChannel, FieldDefinition } from "../encoding";
 import {
   MULTI_TEMPORAL_FUNCTIONS,
@@ -281,7 +281,7 @@ const FieldOptions = ({
                 {label && <SelectLabel>{label}</SelectLabel>}
                 {fns.map((fn) => (
                   <SelectItem key={fn} value={fn ?? NONE_FN}>
-                    {startCase(fn)}
+                    {Strings.startCase(fn)}
                   </SelectItem>
                 ))}
               </SelectGroup>

package/src/plugins/impl/data-explorer/functions/types.ts

@@ -1,6 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { isString } from "lodash-es";
 import type {
   ArgmaxDef,
   ArgminDef,
@@ -59,7 +58,7 @@ type SupportedAggregateOp = (typeof SUPPORTED_AGGREGATE_OPS)[number];
 export const isAggregateOp: typeof isAggregateOpVega = (
   a: string | ArgminDef | ArgmaxDef,
 ): a is AggregateOp => {
-  if (!isString(a)) {
+  if (typeof a !== "string") {
     return false;
   }
 

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { isEqual } from "lodash-es";
+import { dequal as isEqual } from "dequal";
 import { Code2Icon, DatabaseIcon, FunctionSquareIcon } from "lucide-react";
 import {
   type JSX,

package/src/plugins/impl/plotly/PlotlyPlugin.tsx

@@ -8,12 +8,13 @@ import type { Figure } from "./Plot";
 
 import "./plotly.css";
 import "./mapbox.css";
-import { pick, set } from "lodash-es";
+import { set } from "lodash-es";
 import { type JSX, lazy, memo, useMemo } from "react";
 import useEvent from "react-use-event-hook";
 import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
 import { useScript } from "@/hooks/useScript";
 import { Arrays } from "@/utils/arrays";
+import { Objects } from "@/utils/objects";
 import { createParser, type PlotlyTemplateParser } from "./parse-from-template";
 import { usePlotlyLayout } from "./usePlotlyLayout";
 
@@ -179,7 +180,9 @@ export const PlotlyComponent = memo(
 
           setValue((prev) => ({
             ...prev,
-            points: evt.points.map((point) => pick(point, TREE_MAP_DATA_KEYS)),
+            points: evt.points.map((point) =>
+              Objects.pick(point, TREE_MAP_DATA_KEYS),
+            ),
           }));
         })}
         onSunburstClick={useEvent((evt: Readonly<Plotly.PlotMouseEvent>) => {
@@ -189,7 +192,9 @@ export const PlotlyComponent = memo(
 
           setValue((prev) => ({
             ...prev,
-            points: evt.points.map((point) => pick(point, SUNBURST_DATA_KEYS)),
+            points: evt.points.map((point) =>
+              Objects.pick(point, SUNBURST_DATA_KEYS),
+            ),
           }));
         })}
         config={plotlyConfig}
@@ -264,7 +269,7 @@ function extractPoints(
   let parser: PlotlyTemplateParser | undefined;
 
   return points.map((point) => {
-    const standardPointFields = pick(point, STANDARD_POINT_KEYS);
+    const standardPointFields = Objects.pick(point, STANDARD_POINT_KEYS);
 
     // Get the first hovertemplate
     const hovertemplate = Array.isArray(point.data.hovertemplate)

package/src/plugins/impl/plotly/usePlotlyLayout.ts

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { usePrevious } from "@uidotdev/usehooks";
-import { isEqual, pick } from "lodash-es";
+import { dequal as isEqual } from "dequal";
 import type * as Plotly from "plotly.js";
 import { useEffect, useState } from "react";
 import { Objects } from "@/utils/objects";
@@ -50,7 +50,7 @@ export function computeLayoutOnFigureChange(
 ): Partial<Plotly.Layout> {
   return {
     ...createInitialLayout(nextFigure),
-    ...pick(prevLayout, PERSISTED_LAYOUT_KEYS),
+    ...Objects.pick(prevLayout, PERSISTED_LAYOUT_KEYS),
   };
 }
 

package/src/plugins/impl/vega/loader.ts

@@ -1,7 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { tableFromIPC } from "@uwdata/flechette";
-import { isNumber } from "lodash-es";
 import { Logger } from "@/utils/Logger";
 import { Objects } from "@/utils/objects";
 import { batchedArrowLoader, createBatchedLoader } from "./batched";
@@ -42,7 +41,9 @@ const BIG_INT_MIDDLEWARE: Middleware = () => {
     }
 
     const parsedInt = Number.parseInt(v, 10);
-    if (isNumber(parsedInt)) {
+    if (Number.isNaN(parsedInt)) {
+      return v;
+    } else {
       const needsBigInt = Math.abs(parsedInt) > Number.MAX_SAFE_INTEGER;
       if (!needsBigInt) {
         return previousIntegerParserWithoutNaN(v);
@@ -54,8 +55,6 @@ const BIG_INT_MIDDLEWARE: Middleware = () => {
         // as BigInt
         return previousIntegerParserWithoutNaN(v);
       }
-    } else {
-      return "";
     }
   };
   typeParsers.number = (v: string) => {

package/src/plugins/impl/vega/params.ts

@@ -1,8 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { uniq } from "lodash-es";
 import type { TopLevelSpec } from "vega-lite";
 import type { NonNormalizedSpec } from "vega-lite/types_unstable/spec/index.js";
+import { uniq } from "@/utils/arrays";
 import { Marks } from "./marks";
 import {
   type Field,