fix: make name change backwards compat in the ui (#3147)

marimo-team · Dec 12, 2024 · 2367332 · 2367332
1 parent 0e99bed
commit 2367332
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 9 deletions.
diff --git a/frontend/src/components/editor/actions/name-cell-input.tsx b/frontend/src/components/editor/actions/name-cell-input.tsx
@@ -4,9 +4,9 @@ import { Tooltip } from "@/components/ui/tooltip";
 import { getCellNames, useCellActions } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import {
-  DEFAULT_CELL_NAME,
   normalizeName,
   getValidName,
+  isInternalCellName,
 } from "@/core/cells/names";
 import { useOnMount } from "@/hooks/useLifecycle";
 import { cn } from "@/utils/cn";
@@ -69,7 +69,7 @@ export const NameCellContentEditable: React.FC<{
   );
 
   // If the name is the default, don't render the content editable
-  if (value === DEFAULT_CELL_NAME) {
+  if (isInternalCellName(value)) {
     return null;
   }
 
@@ -106,7 +106,7 @@ function useCellNameInput(value: string, onChange: (newName: string) => void) {
     }
 
     // Empty
-    if (!newValue || newValue === DEFAULT_CELL_NAME) {
+    if (!newValue || isInternalCellName(newValue)) {
       onChange(newValue);
       return;
     }
@@ -117,7 +117,7 @@ function useCellNameInput(value: string, onChange: (newName: string) => void) {
   };
 
   return {
-    value: internalValue === DEFAULT_CELL_NAME ? "" : internalValue,
+    value: isInternalCellName(internalValue) ? "" : internalValue,
     onChange: (evt: React.ChangeEvent<HTMLInputElement>) => {
       const newValue = evt.target.value;
       const normalized = normalizeName(newValue);

diff --git a/frontend/src/components/editor/output/ConsoleOutput.tsx b/frontend/src/components/editor/output/ConsoleOutput.tsx
@@ -3,7 +3,7 @@ import React, { useLayoutEffect } from "react";
 import type { OutputMessage } from "@/core/kernel/messages";
 import { OutputRenderer } from "../Output";
 import { cn } from "@/utils/cn";
-import { DEFAULT_CELL_NAME } from "@/core/cells/names";
+import { isInternalCellName } from "@/core/cells/names";
 import { NameCellContentEditable } from "../actions/name-cell-input";
 import type { CellId } from "@/core/cells/ids";
 import { Input } from "@/components/ui/input";
@@ -71,7 +71,7 @@ export const ConsoleOutput = (props: Props): React.ReactNode => {
     }
   });
 
-  if (!hasOutputs && cellName === DEFAULT_CELL_NAME) {
+  if (!hasOutputs && isInternalCellName(cellName)) {
     return null;
   }
 

diff --git a/frontend/src/components/variables/variables-table.tsx b/frontend/src/components/variables/variables-table.tsx
@@ -32,7 +32,7 @@ import { goToVariableDefinition } from "@/core/codemirror/go-to-definition/comma
 import { SearchInput } from "../ui/input";
 import { CellLinkList } from "../editor/links/cell-link-list";
 import { VariableName } from "./common";
-import { DEFAULT_CELL_NAME } from "@/core/cells/names";
+import { isInternalCellName } from "@/core/cells/names";
 
 interface Props {
   className?: string;
@@ -233,7 +233,7 @@ export const VariableTable: React.FC<Props> = memo(
     const resolvedVariables: ResolvedVariable[] = useMemo(() => {
       const getName = (id: CellId) => {
         const name = cellNames[id];
-        if (name === DEFAULT_CELL_NAME) {
+        if (isInternalCellName(name)) {
           return `cell-${cellIds.indexOf(id)}`;
         }
         return name ?? `cell-${cellIds.indexOf(id)}`;

diff --git a/frontend/src/core/cells/names.ts b/frontend/src/core/cells/names.ts
@@ -97,6 +97,9 @@ export function displayCellName(name: string, cellIndex: number): string {
 }
 
 // Default cell names are "_" and "__" (for backwards compatibility)
-function isInternalCellName(name: string): boolean {
+export function isInternalCellName(name: string | undefined): boolean {
+  if (!name) {
+    return true;
+  }
   return name === DEFAULT_CELL_NAME || name === "__";
 }