stable html: fix drag to reorder

Author: williamstein

src/packages/frontend/components/sortable-list.tsx

@@ -12,7 +12,6 @@ being virtualized with react-virtuoso.
 
 import { CSSProperties, ReactNode, useState } from "react";
 import { Icon } from "./icon";
-
 import { DndContext, DragOverlay } from "@dnd-kit/core";
 import {
   SortableContext,

src/packages/frontend/jupyter/cell-list.tsx

@@ -419,13 +419,15 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
     delayRendering, // seems not used anywhere!
     isFirst,
     isLast,
+    isDragging,
   }: {
     id: string;
     isScrolling?: boolean;
     index?: number;
     delayRendering?: number;
     isFirst?: boolean;
     isLast?: boolean;
+    isDragging?: boolean;
   }) {
     const cell = cells.get(id);
     if (cell == null) return null;
@@ -475,6 +477,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
           isLast={isLast}
           dragHandle={dragHandle}
           read_only={read_only}
+          isDragging={isDragging}
         />
       </div>
     );
@@ -691,14 +694,15 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
         disabled={actions == null}
         items={cell_list.toJS()}
         Item={({ id }) => (
+          /* This is what is displayed when dragging the given cell. */
           <div
             style={{
               background: "white",
               boxShadow: "8px 8px 4px 4px #ccc",
               fontSize: `${font_size}px`,
             }}
           >
-            {renderCell({ id })}
+            {renderCell({ id, isDragging: true })}
           </div>
         )}
         onDragStart={(id) => {

src/packages/frontend/jupyter/cell-output.tsx

@@ -32,6 +32,7 @@ interface CellOutputProps {
   style?: React.CSSProperties;
   divRef?;
   llmTools?: LLMTools;
+  isDragging?: boolean;
 }
 
 export function CellOutput({
@@ -48,6 +49,7 @@ export function CellOutput({
   divRef,
   style,
   llmTools,
+  isDragging,
 }: CellOutputProps) {
   const minHeight = complete ? "60vh" : undefined;
 
@@ -94,6 +96,7 @@ export function CellOutput({
         name={name}
         trust={trust}
         llmTools={llmTools}
+        isDragging={isDragging}
       />
     </div>
   );
@@ -109,6 +112,7 @@ interface OutputColumnProps {
   name?: string;
   trust?: boolean;
   llmTools?;
+  isDragging?: boolean;
 }
 
 function OutputColumn({
@@ -121,7 +125,14 @@ function OutputColumn({
   name,
   trust,
   llmTools,
+  isDragging,
 }: OutputColumnProps) {
+  if (isDragging) {
+    // stable html + dragging breaks badly since you end up with two copies
+    // of the same thing, etc.  Also, not carrying the output makes seeing
+    // what is going on more manageable.
+    return null;
+  }
   if (cell.get("collapsed")) {
     return <CollapsedOutput actions={actions} id={id} />;
   }

src/packages/frontend/jupyter/cell.tsx

@@ -60,6 +60,7 @@ interface Props {
   isLast?: boolean;
   dragHandle?: JSX.Element;
   read_only?: boolean;
+  isDragging?: boolean;
 }
 
 function areEqual(props: Props, nextProps: Props): boolean {
@@ -88,7 +89,8 @@ function areEqual(props: Props, nextProps: Props): boolean {
     (nextProps.complete !== props.complete && // only worry about complete when editing this cell
       (nextProps.is_current || props.is_current)) ||
     nextProps.dragHandle !== props.dragHandle ||
-    nextProps.read_only !== props.read_only
+    nextProps.read_only !== props.read_only ||
+    nextProps.isDragging !== props.isDragging
   );
 }
 
@@ -164,6 +166,7 @@ export const Cell: React.FC<Props> = React.memo((props: Props) => {
         trust={props.trust}
         complete={props.is_current && props.complete != null}
         llmTools={props.llmTools}
+        isDragging={props.isDragging}
       />
     );
   }

src/packages/frontend/jupyter/output-messages/message.tsx

@@ -63,18 +63,7 @@ interface CellOutputMessageProps {
 export const CellOutputMessage: React.FC<CellOutputMessageProps> = React.memo(
   (props: CellOutputMessageProps) => {
     const C: any = messageComponent(props.message);
-    return (
-      <C
-        message={props.message}
-        project_id={props.project_id}
-        directory={props.directory}
-        actions={props.actions}
-        name={props.name}
-        trust={props.trust}
-        id={props.id}
-        index={props.index}
-      />
-    );
+    return <C {...props} />;
   },
 );