[UI] Add tooltips to table name columns so they can be read fully

frontend/mock-backend/fixed-data.ts

@@ -113,6 +113,13 @@ const pipelines: ApiPipeline[] = [
     name: 'Markdown description',
     parameters: [],
   },
+  {
+    created_at: new Date('2020-01-22T20:59:23.000Z'),
+    description: 'A pipeline with a long name',
+    id: '9fbe3bd6-a01f-11e8-98d0-529269fb1462',
+    name: 'A pipeline with a very very very very very very very long name',
+    parameters: [],
+  },
 ];
 
 pipelines.push(...generateNPipelines());
@@ -278,6 +285,11 @@ const experiments: ApiExperiment[] = [
     id: 'a4d4f8c6-ce9c-4200-a92e-c48ec759b733',
     name: 'Experiment Number 2',
   },
+  {
+    description: 'This experiment has a very very very long name',
+    id: 'z4d4f8c6-ce9c-4200-a92e-c48ec759b733',
+    name: 'Experiment with a very very very very very very very very very very very very long name',
+  },
 ];
 
 const runs: ApiRunDetail[] = [

frontend/src/components/CustomTableNameColumn.tsx

@@ -0,0 +1,17 @@
+import { CustomRendererProps } from './CustomTable';
+import React from 'react';
+import Tooltip from '@material-ui/core/Tooltip';
+
+/**
+ * Common name custom renderer that shows a tooltip when hovered. The tooltip helps if there isn't
+ * enough space to show the entire name in limited space.
+ */
+export const NameWithTooltip: React.FC<CustomRendererProps<string>> = (
+  props: CustomRendererProps<string>,
+) => {
+  return (
+    <Tooltip title={props.value || ''} enterDelay={300} placement='top-start'>
+      <span>{props.value || ''}</span>
+    </Tooltip>
+  );
+};

frontend/src/components/Graph.tsx

@@ -19,7 +19,7 @@ import * as React from 'react';
 import { classes, stylesheet } from 'typestyle';
 import { fontsize, color, fonts, zIndex } from '../Css';
 import { Constants } from '../lib/Constants';
-import { Tooltip } from '@material-ui/core';
+import Tooltip from '@material-ui/core/Tooltip';
 
 interface Segment {
   angle: number;

frontend/src/pages/ExperimentList.tsx

@@ -37,6 +37,7 @@ import { classes } from 'typestyle';
 import { commonCss, padding } from '../Css';
 import { logger } from '../lib/Utils';
 import { statusToIcon } from './Status';
+import Tooltip from '@material-ui/core/Tooltip';
 
 interface DisplayExperiment extends ApiExperiment {
   last5Runs?: ApiRun[];
@@ -140,13 +141,15 @@ class ExperimentList extends Page<{}, ExperimentListState> {
     props: CustomRendererProps<string>,
   ) => {
     return (
-      <Link
-        className={commonCss.link}
-        onClick={e => e.stopPropagation()}
-        to={RoutePage.EXPERIMENT_DETAILS.replace(':' + RouteParams.experimentId, props.id)}
-      >
-        {props.value}
-      </Link>
+      <Tooltip title={props.value} enterDelay={300} placement='top-start'>
+        <Link
+          className={commonCss.link}
+          onClick={e => e.stopPropagation()}
+          to={RoutePage.EXPERIMENT_DETAILS.replace(':' + RouteParams.experimentId, props.id)}
+        >
+          {props.value}
+        </Link>
+      </Tooltip>
     );
   };
 

frontend/src/pages/NewRun.tsx

@@ -55,6 +55,7 @@ import UploadPipelineDialog, { ImportMethod } from '../components/UploadPipeline
 import { CustomRendererProps } from '../components/CustomTable';
 import { Description } from '../components/Description';
 import { NamespaceContext } from '../lib/KubeflowClient';
+import { NameWithTooltip } from '../components/CustomTableNameColumn';
 
 interface NewRunState {
   description: string;
@@ -112,7 +113,12 @@ class NewRun extends Page<{}, NewRunState> {
   context!: React.ContextType<typeof NamespaceContext>;
 
   private pipelineSelectorColumns = [
-    { label: 'Pipeline name', flex: 1, sortKey: PipelineSortKeys.NAME },
+    {
+      customRenderer: NameWithTooltip,
+      flex: 1,
+      label: 'Pipeline name',
+      sortKey: PipelineSortKeys.NAME,
+    },
     { label: 'Description', flex: 2, customRenderer: descriptionCustomRenderer },
     { label: 'Uploaded on', flex: 1, sortKey: PipelineSortKeys.CREATED_AT },
   ];
@@ -126,7 +132,12 @@ class NewRun extends Page<{}, NewRunState> {
   ];
 
   private experimentSelectorColumns = [
-    { label: 'Experiment name', flex: 1, sortKey: ExperimentSortKeys.NAME },
+    {
+      customRenderer: NameWithTooltip,
+      flex: 1,
+      label: 'Experiment name',
+      sortKey: ExperimentSortKeys.NAME,
+    },
     { label: 'Description', flex: 2 },
     { label: 'Created at', flex: 1, sortKey: ExperimentSortKeys.CREATED_AT },
   ];

frontend/src/pages/PipelineList.tsx

@@ -35,6 +35,7 @@ import { commonCss, padding } from '../Css';
 import { formatDateString, errorToMessage } from '../lib/Utils';
 import { Description } from '../components/Description';
 import produce from 'immer';
+import Tooltip from '@material-ui/core/Tooltip';
 
 interface DisplayPipeline extends ApiPipeline {
   expandState?: ExpandState;
@@ -192,13 +193,15 @@ class PipelineList extends Page<{}, PipelineListState> {
     props: CustomRendererProps<string>,
   ) => {
     return (
-      <Link
-        onClick={e => e.stopPropagation()}
-        className={commonCss.link}
-        to={RoutePage.PIPELINE_DETAILS_NO_VERSION.replace(':' + RouteParams.pipelineId, props.id)}
-      >
-        {props.value}
-      </Link>
+      <Tooltip title={props.value || ''} enterDelay={300} placement='top-start'>
+        <Link
+          onClick={e => e.stopPropagation()}
+          className={commonCss.link}
+          to={RoutePage.PIPELINE_DETAILS_NO_VERSION.replace(':' + RouteParams.pipelineId, props.id)}
+        >
+          {props.value || ''}
+        </Link>
+      </Tooltip>
     );
   };
 

frontend/src/pages/RunList.tsx

@@ -28,6 +28,7 @@ import { URLParser } from '../lib/URLParser';
 import { commonCss, color } from '../Css';
 import { formatDateString, logger, errorToMessage, getRunDuration } from '../lib/Utils';
 import { statusToIcon } from './Status';
+import Tooltip from '@material-ui/core/Tooltip';
 
 interface PipelineVersionInfo {
   displayName?: string;
@@ -200,13 +201,15 @@ class RunList extends React.PureComponent<RunListProps, RunListState> {
     props: CustomRendererProps<string>,
   ) => {
     return (
-      <Link
-        className={commonCss.link}
-        onClick={e => e.stopPropagation()}
-        to={RoutePage.RUN_DETAILS.replace(':' + RouteParams.runId, props.id)}
-      >
-        {props.value}
-      </Link>
+      <Tooltip title={props.value || ''} enterDelay={300} placement='top-start'>
+        <Link
+          className={commonCss.link}
+          onClick={e => e.stopPropagation()}
+          to={RoutePage.RUN_DETAILS.replace(':' + RouteParams.runId, props.id)}
+        >
+          {props.value}
+        </Link>
+      </Tooltip>
     );
   };
 

frontend/src/pages/__snapshots__/ExperimentList.test.tsx.snap

@@ -158,14 +158,20 @@ exports[`ExperimentList renders an empty list with empty state message 1`] = `
 `;
 
 exports[`ExperimentList renders experiment names as links to their details pages 1`] = `
-<Link
-  className="link"
-  onClick={[Function]}
-  replace={false}
-  to="/experiments/details/experiment-id"
+<WithStyles(Tooltip)
+  enterDelay={300}
+  placement="top-start"
+  title="experiment name"
 >
-  experiment name
-</Link>
+  <Link
+    className="link"
+    onClick={[Function]}
+    replace={false}
+    to="/experiments/details/experiment-id"
+  >
+    experiment name
+  </Link>
+</WithStyles(Tooltip)>
 `;
 
 exports[`ExperimentList renders last 5 runs statuses 1`] = `

frontend/src/pages/__snapshots__/NewRun.test.tsx.snap

@@ -42,6 +42,7 @@ exports[`NewRun arriving from pipeline details page indicates that a pipeline is
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Pipeline name",
                 "sortKey": "name",
@@ -330,6 +331,7 @@ exports[`NewRun arriving from pipeline details page indicates that a pipeline is
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Experiment name",
                 "sortKey": "name",
@@ -646,6 +648,7 @@ exports[`NewRun changes the exit button's text if query params indicate this is
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Pipeline name",
                 "sortKey": "name",
@@ -942,6 +945,7 @@ exports[`NewRun changes the exit button's text if query params indicate this is
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Experiment name",
                 "sortKey": "name",
@@ -1262,6 +1266,7 @@ exports[`NewRun changes title and form if the new run will recur, based on the r
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Pipeline name",
                 "sortKey": "name",
@@ -1568,6 +1573,7 @@ exports[`NewRun changes title and form if the new run will recur, based on the r
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Experiment name",
                 "sortKey": "name",
@@ -1904,6 +1910,7 @@ exports[`NewRun changes title and form to default state if the new run is a one-
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Pipeline name",
                 "sortKey": "name",
@@ -2202,6 +2209,7 @@ exports[`NewRun changes title and form to default state if the new run is a one-
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Experiment name",
                 "sortKey": "name",
@@ -2523,6 +2531,7 @@ exports[`NewRun fetches the associated pipeline if one is present in the query p
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Pipeline name",
                 "sortKey": "name",
@@ -2811,6 +2820,7 @@ exports[`NewRun fetches the associated pipeline if one is present in the query p
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Experiment name",
                 "sortKey": "name",
@@ -3125,6 +3135,7 @@ exports[`NewRun renders the new run page 1`] = `
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Pipeline name",
                 "sortKey": "name",
@@ -3421,6 +3432,7 @@ exports[`NewRun renders the new run page 1`] = `
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Experiment name",
                 "sortKey": "name",
@@ -3741,6 +3753,7 @@ exports[`NewRun starting a new recurring run includes additional trigger input f
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Pipeline name",
                 "sortKey": "name",
@@ -4029,6 +4042,7 @@ exports[`NewRun starting a new recurring run includes additional trigger input f
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Experiment name",
                 "sortKey": "name",
@@ -4356,6 +4370,7 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Pipeline name",
                 "sortKey": "name",
@@ -4652,6 +4667,7 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Experiment name",
                 "sortKey": "name",
@@ -4972,6 +4988,7 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Pipeline name",
                 "sortKey": "name",
@@ -5268,6 +5285,7 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Experiment name",
                 "sortKey": "name",
@@ -5599,6 +5617,7 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Pipeline name",
                 "sortKey": "name",
@@ -5895,6 +5914,7 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Experiment name",
                 "sortKey": "name",
@@ -6215,6 +6235,7 @@ exports[`NewRun updates the run's state with the associated experiment if one is
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Pipeline name",
                 "sortKey": "name",
@@ -6511,6 +6532,7 @@ exports[`NewRun updates the run's state with the associated experiment if one is
           columns={
             Array [
               Object {
+                "customRenderer": [Function],
                 "flex": 1,
                 "label": "Experiment name",
                 "sortKey": "name",