feat: DH-19382: Add actions and timing info on console history hover (#2526)

Adds new actions when hovering over console history items: copy, rerun,
and a contextual help with timing (from the same source as the extant
time in our command history but formatted differently to meet spec) as
well as new server timing.

Author: jnumainville

package-lock.json

@@ -177,7 +177,7 @@
     "@deephaven/jsapi-components": "file:packages/jsapi-components",
     "@deephaven/jsapi-nodejs": "file:packages/jsapi-nodejs",
     "@deephaven/jsapi-shim": "file:packages/jsapi-shim",
-    "@deephaven/jsapi-types": "^1.0.0-dev0.40.4",
+    "@deephaven/jsapi-types": "^1.0.0-dev0.40.6",
     "@deephaven/jsapi-utils": "file:packages/jsapi-utils",
     "@deephaven/log": "file:packages/log",
     "@deephaven/mocks": "file:packages/mocks",

package.json

@@ -347,6 +347,8 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
         error?: string;
         changes: DhType.ide.VariableChanges;
         cancel: () => unknown;
+        startTimestamp?: DhType.LongWrapper;
+        endTimestamp?: DhType.LongWrapper;
       };
     }>
   ): void {
@@ -400,16 +402,22 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
           message: string;
           error?: string;
           changes: DhType.ide.VariableChanges;
+          startTimestamp?: DhType.LongWrapper;
+          endTimestamp?: DhType.LongWrapper;
         }
       | undefined,
     historyItem: ConsoleHistoryActionItem,
     workspaceItemPromise: Promise<CommandHistoryStorageItem>
   ): void {
+    const serverStartTime = result?.startTimestamp?.asNumber();
+    const serverEndTime = result?.endTimestamp?.asNumber();
     const newHistoryItem = {
       ...historyItem,
       wrappedResult: undefined,
       cancelResult: undefined,
       result: result ?? historyItem.result,
+      serverStartTime,
+      serverEndTime,
     };
 
     this.setState(({ consoleHistory }) => {
@@ -432,7 +440,11 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
     this.updateHistory(result, newHistoryItem);
     this.updateKnownObjects(newHistoryItem);
     this.updateWorkspaceHistoryItem(
-      { error: result.error },
+      {
+        error: result.error,
+        serverStartTime,
+        serverEndTime,
+      },
       workspaceItemPromise
     );
 
@@ -655,11 +667,16 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
 
   /**
    * Updates an existing workspace CommandHistoryItem
-   * @param result The result to store with the history item. Could be empty object for success
+   * @param result The result to store with the history item.
+   * Possibly contains an error message if there was a failure, server start time, and server end time.
    * @param workspaceItemPromise The workspace data row promise for the workspace item to be updated
    */
   updateWorkspaceHistoryItem(
-    result: { error?: string },
+    result: {
+      error?: string;
+      serverStartTime?: number;
+      serverEndTime?: number;
+    },
     workspaceItemPromise: Promise<CommandHistoryStorageItem>
   ): void {
     const promise = this.pending.add(workspaceItemPromise);
@@ -1107,6 +1124,7 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
                 supportsType={supportsType}
                 iconForType={iconForType}
                 ref={this.consoleHistoryContent}
+                onCommandSubmit={this.handleCommandSubmit}
               />
               {historyChildren}
             </div>

packages/console/src/Console.tsx

@@ -30,6 +30,7 @@ function makeCommandStarted() {
     command: 'started',
     result: null,
     startTime: Date.now(),
+    endTime: Date.now(),
   };
 }
 
@@ -99,14 +100,14 @@ describe('different command results', () => {
     expect(cleanup).toHaveBeenCalled();
   });
 
-  it('renders <1s elapsed time for a command that was just started', () => {
+  it('renders correct time for a command that was just started', () => {
     callback(makeCommandStarted());
-    expect(screen.getByText('<1s')).toBeTruthy();
+    expect(screen.getByText('0.00s')).toBeTruthy();
   });
 
   it('renders correct time for completed command', () => {
     callback(makeCommandCompletedSuccess());
-    expect(screen.getByText('5s')).toBeTruthy();
+    expect(screen.getByText('5.00s')).toBeTruthy();
   });
 
   it('shows error message', () => {

packages/console/src/command-history/CommandHistoryItemTooltip.test.tsx

@@ -38,23 +38,6 @@ export class CommandHistoryItemTooltip extends Component<
     onUpdate: (): void => undefined,
   };
 
-  static getTimeString(
-    startTime: string | undefined,
-    endTime: string | number
-  ): string | null {
-    if (startTime == null || endTime === '' || endTime === 0) {
-      return null;
-    }
-
-    const deltaTime = Math.round(
-      (new Date(endTime).valueOf() - new Date(startTime).valueOf()) / 1000
-    );
-
-    if (deltaTime < 1) return '<1s';
-
-    return TimeUtils.formatElapsedTime(deltaTime);
-  }
-
   constructor(props: CommandHistoryItemTooltipProps) {
     super(props);
 
@@ -167,7 +150,7 @@ export class CommandHistoryItemTooltip extends Component<
 
     const errorMessage = result?.error ?? error;
 
-    const timeString = CommandHistoryItemTooltip.getTimeString(
+    const timeString = TimeUtils.formatConvertedDuration(
       startTime,
       endTime ?? currentTime
     );

packages/console/src/command-history/CommandHistoryItemTooltip.tsx

@@ -10,7 +10,7 @@ export interface CommandHistoryStorageData {
   command: string;
   startTime: string;
   endTime?: string;
-  result?: { error?: string };
+  result?: { error?: string; serverStartTime?: number; serverEndTime?: number };
 }
 
 export interface CommandHistoryStorageItem extends StorageItem {

packages/console/src/command-history/CommandHistoryStorage.ts

@@ -44,3 +44,11 @@ $console-gutter-width: 30px;
     }
   }
 }
+
+.console-history-item-tooltip {
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: $spacer-1 $spacer-3;
+  text-align: left;
+  margin-bottom: $spacer-2;
+}

packages/console/src/console-history/ConsoleHistory.scss

@@ -15,6 +15,7 @@ interface ConsoleHistoryProps {
   disabled?: boolean;
   supportsType: (type: string) => boolean;
   iconForType: (type: string) => ReactElement;
+  onCommandSubmit: (command: string) => void;
 }
 
 function itemKey(i: number, item: ConsoleHistoryActionItem): string {
@@ -37,6 +38,7 @@ const ConsoleHistory = React.forwardRef(function ConsoleHistory(
     openObject,
     supportsType,
     iconForType,
+    onCommandSubmit,
   } = props;
   const historyElements = [];
   for (let i = 0; i < items.length; i += 1) {
@@ -50,6 +52,7 @@ const ConsoleHistory = React.forwardRef(function ConsoleHistory(
         language={language}
         supportsType={supportsType}
         iconForType={iconForType}
+        onCommandSubmit={onCommandSubmit}
       />
     );
     historyElements.push(historyElement);

packages/console/src/console-history/ConsoleHistory.tsx

@@ -12,9 +12,38 @@ $button-vert-margin: ConsoleVariables.$button-vert-margin;
 }
 
 .console-history-item-command {
+  position: relative;
   white-space: pre-line;
 }
 
+.console-history-actions {
+  position: absolute;
+  gap: $spacer-1;
+  top: 0;
+  right: $spacer-2;
+  display: none;
+  align-items: center;
+  background-color: var(--dh-color-neutral-hover-bg);
+  border-radius: $border-radius;
+  padding: $spacer-1;
+}
+
+.console-history-item-command-tooltip-active {
+  background-color: var(--dh-color-neutral-hover-bg);
+
+  .console-history-actions {
+    display: flex;
+  }
+}
+
+.console-history-item-command:hover {
+  background-color: var(--dh-color-neutral-hover-bg);
+
+  .console-history-actions {
+    display: flex;
+  }
+}
+
 .console-history-item-result .log-message {
   white-space: pre-wrap;
   word-wrap: break-word;
@@ -95,3 +124,42 @@ $button-vert-margin: ConsoleVariables.$button-vert-margin;
     }
   }
 }
+
+.console-history-actions-1 {
+  // actions are centered over the line
+  // note that the actions are much wider than the line itself
+  top: -($spacer-3 * 0.875);
+}
+
+.console-history-actions-2 {
+  // actions are centered over the line
+  top: -($spacer-1 * 0.5);
+}
+
+.console-command-result:last-child .console-history-actions-1 {
+  // pushed down so that the actions are visible
+  top: -$spacer-4;
+}
+
+.console-command-result:first-child .console-history-actions-1 {
+  // pushed up to prevent layout shifts
+  top: $spacer-0;
+}
+
+.console-history-item-contextual-help-content {
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: $spacer-1 $spacer-3;
+  text-align: left;
+  margin-bottom: $spacer-2;
+  white-space: nowrap;
+}
+
+.console-history-item-contextual-help {
+  section[class*='spectrum-ContextualHelp-dialog'] {
+    // The default size of the contextual help is only 250px and is too small.
+    // Just set a size automatically based on the content.
+    width: fit-content;
+    min-width: 150px;
+  }
+}

packages/console/src/console-history/ConsoleHistoryItem.scss

@@ -12,6 +12,7 @@ import ConsoleHistoryResultInProgress from './ConsoleHistoryResultInProgress';
 import ConsoleHistoryResultErrorMessage from './ConsoleHistoryResultErrorMessage';
 import './ConsoleHistoryItem.scss';
 import { type ConsoleHistoryActionItem } from './ConsoleHistoryTypes';
+import ConsoleHistoryItemActions from './ConsoleHistoryItemActions';
 
 const log = Log.module('ConsoleHistoryItem');
 
@@ -24,11 +25,16 @@ interface ConsoleHistoryItemProps {
   // eslint-disable-next-line react/no-unused-prop-types
   supportsType: (type: string) => boolean;
   iconForType: (type: string) => ReactElement;
+  onCommandSubmit: (command: string) => void;
+}
+
+interface ConsoleHistoryItemState {
+  isTooltipVisible: boolean;
 }
 
 class ConsoleHistoryItem extends PureComponent<
   ConsoleHistoryItemProps,
-  Record<string, never>
+  ConsoleHistoryItemState
 > {
   static defaultProps = {
     disabled: false,
@@ -37,6 +43,10 @@ class ConsoleHistoryItem extends PureComponent<
   constructor(props: ConsoleHistoryItemProps) {
     super(props);
 
+    this.state = {
+      isTooltipVisible: false,
+    };
+
     this.handleCancelClick = this.handleCancelClick.bind(this);
     this.handleObjectClick = this.handleObjectClick.bind(this);
   }
@@ -57,17 +67,29 @@ class ConsoleHistoryItem extends PureComponent<
   }
 
   render(): ReactElement {
-    const { disabled, item, language, iconForType } = this.props;
+    const { isTooltipVisible } = this.state;
+    const { disabled, item, language, iconForType, onCommandSubmit } =
+      this.props;
     const { disabledObjects, result } = item;
     const hasCommand = item.command != null && item.command !== '';
-
     let commandElement = null;
     if (hasCommand) {
       commandElement = (
-        <div className="console-history-item-command">
+        <div
+          className={classNames('console-history-item-command', {
+            'console-history-item-command-tooltip-active': isTooltipVisible,
+          })}
+        >
           <div className="console-history-gutter">&gt;</div>
           <div className="console-history-content">
             <Code language={language}>{item.command}</Code>
+            <ConsoleHistoryItemActions
+              item={item}
+              onCommandSubmit={onCommandSubmit}
+              handleTooltipVisible={(isVisible: boolean) =>
+                this.setState({ isTooltipVisible: isVisible })
+              }
+            />
           </div>
         </div>
       );