[dagit] Fix tooltips in Gantt chart, use monospace font and middle tr…

…uncation (#7025)

js_modules/dagit/packages/core/src/app/AppProvider.tsx

@@ -16,6 +16,7 @@ import {
   GlobalToasterStyle,
   GlobalTooltipStyle,
   FontFamily,
+  CustomTooltipProvider,
 } from '@dagster-io/ui';
 import * as React from 'react';
 import {BrowserRouter} from 'react-router-dom';
@@ -27,7 +28,6 @@ import {WorkspaceProvider} from '../workspace/WorkspaceContext';
 import {AppContext} from './AppContext';
 import {CustomAlertProvider} from './CustomAlertProvider';
 import {CustomConfirmationProvider} from './CustomConfirmationProvider';
-import {CustomTooltipProvider} from './CustomTooltipProvider';
 import {LayoutProvider} from './LayoutProvider';
 import {PermissionsProvider} from './Permissions';
 import {patchCopyToRemoveZeroWidthUnderscores} from './Util';

js_modules/dagit/packages/core/src/app/Util.tsx

@@ -19,15 +19,45 @@ function indexesOf(string: string, search: RegExp | string) {
 export const withMiddleTruncation = (text: string, options: {maxLength: number}) => {
   const overflowLength = text.length - options.maxLength;
   if (overflowLength <= 0) {
+    // No truncation is necessary
     return text;
   }
-  let breakpoint = Math.floor(text.length / 2);
+  if (options.maxLength <= 6) {
+    // Middle truncation to this few characters (eg: abc…ef) is kind of silly
+    // and just using abcde… looks better.
+    return text.substring(0, options.maxLength - 1) + '…';
+  }
+
+  // Find all the breakpoints in the string
+  //   "my_great_long_solid_name"
+  //     ˄     ˄    ˄     ˄
   const breakpoints = text.includes('__') ? indexesOf(text, /__/g) : indexesOf(text, /[_>\.-]/g);
-  if (breakpoints.length > 0) {
-    breakpoint = breakpoints[Math.floor(breakpoints.length / 2)];
+
+  // Given no breakpoints, slice out the middle of the string. Adding
+  // the overflowLength here gives us the END point of the truncated region.
+  //
+  //   "abc(defg)hijk"
+  //            ˄
+  let breakpoint = Math.floor((text.length + overflowLength) / 2);
+
+  // Find the first breakpoint that exists AFTER enough characters that we could show
+  // at least three prefix letters after cutting out overflowLength.
+  const firstUsableIdx = breakpoints.findIndex((bp) => bp > overflowLength + 3);
+
+  if (firstUsableIdx !== -1) {
+    // If we found a usable breakpoint, see if we could instead choose the middle
+    // breakpoint which would give us more prefix. All else equal,
+    // "my_great_l…_name" looks better than "my_g…_solid_name"
+    const middleIdx = Math.floor(breakpoints.length / 2);
+    breakpoint = breakpoints[Math.max(firstUsableIdx, middleIdx)];
   }
 
-  return `${text.substring(0, breakpoint - (overflowLength + 1))}…${text.substring(breakpoint)}`;
+  const result = [
+    text.substring(0, breakpoint - (overflowLength + 1)),
+    text.substring(breakpoint),
+  ].join('…');
+
+  return result;
 };
 
 export const formatElapsedTime = (msec: number) => {

js_modules/dagit/packages/core/src/gantt/GanttChart.stories.tsx

@@ -1,7 +1,7 @@
+import {CustomTooltipProvider} from '@dagster-io/ui';
 import {Meta} from '@storybook/react/types-6-0';
 import React, {useState} from 'react';
 
-import {CustomTooltipProvider} from '../app/CustomTooltipProvider';
 import {extractMetadataFromLogs} from '../runs/RunMetadataProvider';
 import {RunMetadataProviderMessageFragment} from '../runs/types/RunMetadataProviderMessageFragment';
 import {StorybookProvider} from '../testing/StorybookProvider';

js_modules/dagit/packages/core/src/gantt/GanttChart.tsx

@@ -2,6 +2,7 @@ import {
   Box,
   Checkbox,
   ColorsWIP,
+  FontFamily,
   Group,
   IconWIP,
   NonIdealState,
@@ -16,6 +17,7 @@ import styled from 'styled-components/macro';
 
 import {AppContext} from '../app/AppContext';
 import {filterByQuery, GraphQueryItem} from '../app/GraphQueryImpl';
+import {withMiddleTruncation} from '../app/Util';
 import {WebSocketContext} from '../app/WebSocketProvider';
 import {
   EMPTY_RUN_METADATA,
@@ -492,7 +494,7 @@ const GanttChartViewportContents: React.FC<GanttChartViewportContentsProps> = (p
     items.push(
       <div
         key={box.key}
-        data-tooltip={box.width < box.node.name.length * 5 ? box.node.name : undefined}
+        data-tooltip={box.node.name}
         onClick={(evt: React.MouseEvent<any>) => props.onClickStep(box.node.name, evt)}
         onDoubleClick={() => props.onDoubleClickStep(box.node.name)}
         onMouseEnter={() => props.setHoveredNodeName(box.node.name)}
@@ -511,7 +513,7 @@ const GanttChartViewportContents: React.FC<GanttChartViewportContentsProps> = (p
         }}
       >
         {box.state === IStepState.RUNNING ? <Spinner purpose="body-text" /> : undefined}
-        {box.width > BOX_SHOW_LABEL_WIDTH_CUTOFF ? box.node.name : undefined}
+        {truncatedBoxLabel(box)}
       </div>,
     );
   });
@@ -660,6 +662,18 @@ const GanttLine = React.memo(
   isEqual,
 );
 
+function truncatedBoxLabel(box: GanttChartBox) {
+  if (box.width <= BOX_SHOW_LABEL_WIDTH_CUTOFF) {
+    return undefined;
+  }
+
+  // Note: The constants here must be in sync with the CSS immediately below
+  const totalPadding = 7 + (box.state === IStepState.RUNNING ? 16 : 0);
+  const maxLength = (box.width - totalPadding) / 6.2;
+
+  return withMiddleTruncation(box.node.name, {maxLength});
+}
+
 // Note: It is much faster to use standard CSS class selectors here than make
 // each box and line a styled-component because all styled components register
 // listeners for the "theme" React context.
@@ -704,13 +718,18 @@ const GanttChartContainer = styled.div`
   }
 
   .box {
+    /* Note: padding + font changes may also impact truncatedBoxLabel */
+
     height: ${BOX_HEIGHT - BOX_MARGIN_Y * 2}px;
     padding: 3px;
     padding-right: 1px;
     border: 1px solid transparent;
     border-radius: 2px;
     white-space: nowrap;
-    text-overflow: ellipsis;
+    font-family: ${FontFamily.monospace};
+    font-size: 12.5px;
+    font-weight: 700;
+    line-height: 15px;
 
     transition: top ${CSS_DURATION}ms linear, left ${CSS_DURATION}ms linear,
       width ${CSS_DURATION}ms linear, height ${CSS_DURATION}ms linear;

js_modules/dagit/packages/ui/src/index.ts

@@ -12,6 +12,7 @@ export * from './components/Checkbox';
 export * from './components/Colors';
 export * from './components/Countdown';
 export * from './components/CursorControls';
+export * from './components/CustomTooltipProvider';
 export * from './components/Icon';
 export * from './components/Dialog';
 export * from './components/Group';