From 9d3a29e3244176b05a1d858855b91eecab6120a4 Mon Sep 17 00:00:00 2001 From: Yuan Gong Date: Wed, 22 Jan 2020 16:22:40 +0800 Subject: [PATCH 1/3] Add tooltips to table name columns so they can be read fully --- frontend/mock-backend/fixed-data.ts | 12 ++++++++++++ .../src/components/CustomTableNameColumn.tsx | 17 +++++++++++++++++ frontend/src/pages/ExperimentList.tsx | 17 ++++++++++------- frontend/src/pages/NewRun.tsx | 16 ++++++++++++++-- frontend/src/pages/PipelineList.tsx | 17 ++++++++++------- frontend/src/pages/RunList.tsx | 17 ++++++++++------- 6 files changed, 73 insertions(+), 23 deletions(-) create mode 100644 frontend/src/components/CustomTableNameColumn.tsx diff --git a/frontend/mock-backend/fixed-data.ts b/frontend/mock-backend/fixed-data.ts index 415afb2512f..25704bc4557 100644 --- a/frontend/mock-backend/fixed-data.ts +++ b/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[] = [ diff --git a/frontend/src/components/CustomTableNameColumn.tsx b/frontend/src/components/CustomTableNameColumn.tsx new file mode 100644 index 00000000000..042c743a462 --- /dev/null +++ b/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> = ( + props: CustomRendererProps, +) => { + return ( + + {props.value || ''} + + ); +}; diff --git a/frontend/src/pages/ExperimentList.tsx b/frontend/src/pages/ExperimentList.tsx index d3a62f590e2..a3768b85027 100644 --- a/frontend/src/pages/ExperimentList.tsx +++ b/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, ) => { return ( - e.stopPropagation()} - to={RoutePage.EXPERIMENT_DETAILS.replace(':' + RouteParams.experimentId, props.id)} - > - {props.value} - + + e.stopPropagation()} + to={RoutePage.EXPERIMENT_DETAILS.replace(':' + RouteParams.experimentId, props.id)} + > + {props.value} + + ); }; diff --git a/frontend/src/pages/NewRun.tsx b/frontend/src/pages/NewRun.tsx index 3a95b2eabbc..aed1f9bf2bf 100644 --- a/frontend/src/pages/NewRun.tsx +++ b/frontend/src/pages/NewRun.tsx @@ -55,6 +55,8 @@ import UploadPipelineDialog, { ImportMethod } from '../components/UploadPipeline import { CustomRendererProps } from '../components/CustomTable'; import { Description } from '../components/Description'; import { NamespaceContext } from '../lib/KubeflowClient'; +import { Tooltip } from '@material-ui/core'; +import { NameWithTooltip } from '../components/CustomTableNameColumn'; interface NewRunState { description: string; @@ -112,7 +114,12 @@ class NewRun extends Page<{}, NewRunState> { context!: React.ContextType; private pipelineSelectorColumns = [ - { label: 'Pipeline name', flex: 1, sortKey: PipelineSortKeys.NAME }, + { + label: 'Pipeline name', + flex: 1, + sortKey: PipelineSortKeys.NAME, + customRenderer: NameWithTooltip, + }, { label: 'Description', flex: 2, customRenderer: descriptionCustomRenderer }, { label: 'Uploaded on', flex: 1, sortKey: PipelineSortKeys.CREATED_AT }, ]; @@ -126,7 +133,12 @@ class NewRun extends Page<{}, NewRunState> { ]; private experimentSelectorColumns = [ - { label: 'Experiment name', flex: 1, sortKey: ExperimentSortKeys.NAME }, + { + label: 'Experiment name', + flex: 1, + sortKey: ExperimentSortKeys.NAME, + customRenderer: NameWithTooltip, + }, { label: 'Description', flex: 2 }, { label: 'Created at', flex: 1, sortKey: ExperimentSortKeys.CREATED_AT }, ]; diff --git a/frontend/src/pages/PipelineList.tsx b/frontend/src/pages/PipelineList.tsx index c7c874c3a09..6cbf2d0d37d 100644 --- a/frontend/src/pages/PipelineList.tsx +++ b/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, ) => { return ( - e.stopPropagation()} - className={commonCss.link} - to={RoutePage.PIPELINE_DETAILS_NO_VERSION.replace(':' + RouteParams.pipelineId, props.id)} - > - {props.value} - + + e.stopPropagation()} + className={commonCss.link} + to={RoutePage.PIPELINE_DETAILS_NO_VERSION.replace(':' + RouteParams.pipelineId, props.id)} + > + {props.value || ''} + + ); }; diff --git a/frontend/src/pages/RunList.tsx b/frontend/src/pages/RunList.tsx index 349fd8fde48..119b190485d 100644 --- a/frontend/src/pages/RunList.tsx +++ b/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 { props: CustomRendererProps, ) => { return ( - e.stopPropagation()} - to={RoutePage.RUN_DETAILS.replace(':' + RouteParams.runId, props.id)} - > - {props.value} - + + e.stopPropagation()} + to={RoutePage.RUN_DETAILS.replace(':' + RouteParams.runId, props.id)} + > + {props.value} + + ); }; From fe152e6a5f6beeb11154146209bebaf868fe5817 Mon Sep 17 00:00:00 2001 From: Yuan Gong Date: Wed, 22 Jan 2020 16:28:48 +0800 Subject: [PATCH 2/3] Update test snapshot --- .../ExperimentList.test.tsx.snap | 20 +++++++++++------ .../pages/__snapshots__/NewRun.test.tsx.snap | 22 +++++++++++++++++++ .../pages/__snapshots__/RunList.test.tsx.snap | 20 +++++++++++------ 3 files changed, 48 insertions(+), 14 deletions(-) diff --git a/frontend/src/pages/__snapshots__/ExperimentList.test.tsx.snap b/frontend/src/pages/__snapshots__/ExperimentList.test.tsx.snap index c12ca3d2248..56471f7a637 100644 --- a/frontend/src/pages/__snapshots__/ExperimentList.test.tsx.snap +++ b/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`] = ` - - experiment name - + + experiment name + + `; exports[`ExperimentList renders last 5 runs statuses 1`] = ` diff --git a/frontend/src/pages/__snapshots__/NewRun.test.tsx.snap b/frontend/src/pages/__snapshots__/NewRun.test.tsx.snap index 8548db006f9..604f42236f9 100644 --- a/frontend/src/pages/__snapshots__/NewRun.test.tsx.snap +++ b/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", diff --git a/frontend/src/pages/__snapshots__/RunList.test.tsx.snap b/frontend/src/pages/__snapshots__/RunList.test.tsx.snap index 71958dc8bba..116497befb7 100644 --- a/frontend/src/pages/__snapshots__/RunList.test.tsx.snap +++ b/frontend/src/pages/__snapshots__/RunList.test.tsx.snap @@ -7672,14 +7672,20 @@ exports[`RunList renders raw metric 1`] = ` `; exports[`RunList renders run name as link to its details page 1`] = ` - - test run - + + test run + + `; exports[`RunList renders status as icon 1`] = ` From c51b0e77ffd2b2d1aeec52f2d423cb7db6efc3cc Mon Sep 17 00:00:00 2001 From: Yuan Gong Date: Wed, 22 Jan 2020 16:34:05 +0800 Subject: [PATCH 3/3] Fix lint errors --- frontend/src/components/Graph.tsx | 2 +- frontend/src/pages/NewRun.tsx | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/Graph.tsx b/frontend/src/components/Graph.tsx index f33b5a8b209..934100bf8ae 100644 --- a/frontend/src/components/Graph.tsx +++ b/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; diff --git a/frontend/src/pages/NewRun.tsx b/frontend/src/pages/NewRun.tsx index aed1f9bf2bf..86482a20838 100644 --- a/frontend/src/pages/NewRun.tsx +++ b/frontend/src/pages/NewRun.tsx @@ -55,7 +55,6 @@ import UploadPipelineDialog, { ImportMethod } from '../components/UploadPipeline import { CustomRendererProps } from '../components/CustomTable'; import { Description } from '../components/Description'; import { NamespaceContext } from '../lib/KubeflowClient'; -import { Tooltip } from '@material-ui/core'; import { NameWithTooltip } from '../components/CustomTableNameColumn'; interface NewRunState { @@ -115,10 +114,10 @@ class NewRun extends Page<{}, NewRunState> { private pipelineSelectorColumns = [ { - label: 'Pipeline name', + customRenderer: NameWithTooltip, flex: 1, + label: 'Pipeline name', sortKey: PipelineSortKeys.NAME, - customRenderer: NameWithTooltip, }, { label: 'Description', flex: 2, customRenderer: descriptionCustomRenderer }, { label: 'Uploaded on', flex: 1, sortKey: PipelineSortKeys.CREATED_AT }, @@ -134,10 +133,10 @@ class NewRun extends Page<{}, NewRunState> { private experimentSelectorColumns = [ { - label: 'Experiment name', + customRenderer: NameWithTooltip, flex: 1, + label: 'Experiment name', sortKey: ExperimentSortKeys.NAME, - customRenderer: NameWithTooltip, }, { label: 'Description', flex: 2 }, { label: 'Created at', flex: 1, sortKey: ExperimentSortKeys.CREATED_AT },