From 7cb4ca78ac4e5840dbfdab761e024d884e9c808b Mon Sep 17 00:00:00 2001 From: rogermparent Date: Fri, 1 Apr 2022 14:05:44 -0400 Subject: [PATCH 1/2] Move Cell component to its own module --- .../src/experiments/components/cell/Cell.tsx | 64 +++++++++++++++++ .../experiments/util/buildDynamicColumns.tsx | 68 +------------------ 2 files changed, 67 insertions(+), 65 deletions(-) create mode 100644 webview/src/experiments/components/cell/Cell.tsx diff --git a/webview/src/experiments/components/cell/Cell.tsx b/webview/src/experiments/components/cell/Cell.tsx new file mode 100644 index 0000000000..d636a2fb09 --- /dev/null +++ b/webview/src/experiments/components/cell/Cell.tsx @@ -0,0 +1,64 @@ +import { Experiment } from 'dvc/src/experiments/webview/contract' +import React from 'react' +import { Cell } from 'react-table' +import { CopyButton } from '../copyButton/CopyButton' +import Tooltip, { + CELL_TOOLTIP_DELAY +} from '../../../shared/components/tooltip/Tooltip' +import { formatFloat } from '../../util/numberFormatting' +import styles from '../table/styles.module.scss' + +const groupLabels: Record = { + metrics: 'Metric', + params: 'Parameter' +} + +const CellTooltip: React.FC<{ + cell: Cell +}> = ({ cell }) => { + const { + column: { group }, + value + } = cell + return ( + <> + {groupLabels[group as string]}: {value} + + ) +} + +const UndefinedCell = ( +
+ . . . +
+) + +export const CellComponent: React.FC< + Cell +> = cell => { + const { value } = cell + if (value === undefined) { + return UndefinedCell + } + + const stringValue = String(value) + + const displayValue = + typeof value === 'number' && !Number.isInteger(value) + ? formatFloat(value as number) + : stringValue + + return ( + } + placement="bottom" + arrow={true} + delay={[CELL_TOOLTIP_DELAY, 0]} + > +
+ + {displayValue} +
+ + ) +} diff --git a/webview/src/experiments/util/buildDynamicColumns.tsx b/webview/src/experiments/util/buildDynamicColumns.tsx index dc7bcb40c3..2b57505d8c 100644 --- a/webview/src/experiments/util/buildDynamicColumns.tsx +++ b/webview/src/experiments/util/buildDynamicColumns.tsx @@ -1,72 +1,10 @@ import React from 'react' import get from 'lodash/get' -import { - Column, - Accessor, - ColumnGroup, - ColumnInstance, - Cell -} from 'react-table' +import { Column, Accessor, ColumnGroup, ColumnInstance } from 'react-table' import { Experiment, MetricOrParam } from 'dvc/src/experiments/webview/contract' -import { formatFloat } from './numberFormatting' -import Tooltip, { - CELL_TOOLTIP_DELAY -} from '../../shared/components/tooltip/Tooltip' import styles from '../components/table/styles.module.scss' -import { CopyButton } from '../components/copyButton/CopyButton' import { OverflowHoverTooltip } from '../components/overflowHoverTooltip/OverflowHoverTooltip' -const UndefinedCell = ( -
- . . . -
-) - -const groupLabels: Record = { - metrics: 'Metric', - params: 'Parameter' -} - -const CellTooltip: React.FC<{ - cell: Cell -}> = ({ cell }) => { - const { - column: { group }, - value - } = cell - return ( - <> - {groupLabels[group as string]}: {value} - - ) -} - -const Cell: React.FC> = cell => { - const { value } = cell - if (value === undefined) { - return UndefinedCell - } - - const stringValue = String(value) - - const displayValue = - typeof value === 'number' && !Number.isInteger(value) - ? formatFloat(value as number) - : stringValue - - return ( - } - placement="bottom" - arrow={true} - delay={[CELL_TOOLTIP_DELAY, 0]} - > -
- - {displayValue} -
- - ) -} +import { CellComponent } from '../components/cell/Cell' const Header: React.FC<{ column: Column }> = ({ column: { name } @@ -96,7 +34,7 @@ const buildDynamicColumns = ( const childColumns = buildDynamicColumns(properties, path) const column: ColumnGroup | Column = { - Cell, + Cell: CellComponent, Header, accessor: pathArray && buildAccessor(pathArray), columns: childColumns.length > 0 ? childColumns : undefined, From dd4c713c3f349838ec141836a4b9216606025576 Mon Sep 17 00:00:00 2001 From: rogermparent Date: Fri, 1 Apr 2022 14:13:25 -0400 Subject: [PATCH 2/2] Move tooltip to its own component --- .../src/experiments/components/cell/Cell.tsx | 20 +---------------- .../components/cell/CellTooltip.tsx | 22 +++++++++++++++++++ 2 files changed, 23 insertions(+), 19 deletions(-) create mode 100644 webview/src/experiments/components/cell/CellTooltip.tsx diff --git a/webview/src/experiments/components/cell/Cell.tsx b/webview/src/experiments/components/cell/Cell.tsx index d636a2fb09..ab9d0a0266 100644 --- a/webview/src/experiments/components/cell/Cell.tsx +++ b/webview/src/experiments/components/cell/Cell.tsx @@ -1,6 +1,7 @@ import { Experiment } from 'dvc/src/experiments/webview/contract' import React from 'react' import { Cell } from 'react-table' +import { CellTooltip } from './CellTooltip' import { CopyButton } from '../copyButton/CopyButton' import Tooltip, { CELL_TOOLTIP_DELAY @@ -8,25 +9,6 @@ import Tooltip, { import { formatFloat } from '../../util/numberFormatting' import styles from '../table/styles.module.scss' -const groupLabels: Record = { - metrics: 'Metric', - params: 'Parameter' -} - -const CellTooltip: React.FC<{ - cell: Cell -}> = ({ cell }) => { - const { - column: { group }, - value - } = cell - return ( - <> - {groupLabels[group as string]}: {value} - - ) -} - const UndefinedCell = (
. . . diff --git a/webview/src/experiments/components/cell/CellTooltip.tsx b/webview/src/experiments/components/cell/CellTooltip.tsx new file mode 100644 index 0000000000..38e07211e1 --- /dev/null +++ b/webview/src/experiments/components/cell/CellTooltip.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Cell } from 'react-table' +import { Experiment } from 'dvc/src/experiments/webview/contract' + +const groupLabels: Record = { + metrics: 'Metric', + params: 'Parameter' +} + +export const CellTooltip: React.FC<{ + cell: Cell +}> = ({ cell }) => { + const { + column: { group }, + value + } = cell + return ( + <> + {groupLabels[group as string]}: {value} + + ) +}