diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/DataTableView.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/DataTableView.tsx index 070d8832e3b8..9a954858926c 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/DataTableView.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/DataTableView.tsx @@ -1,4 +1,3 @@ -import LinkIcon from '@mui/icons-material/Link'; import {Box} from '@mui/material'; import { GridColDef, @@ -27,12 +26,14 @@ import React, { useState, } from 'react'; import {useHistory} from 'react-router-dom'; +import styled from 'styled-components'; import { isWeaveObjectRef, parseRef, parseRefMaybe, } from '../../../../../../react'; +import {Tooltip} from '../../../../../Tooltip'; import {flattenObjectPreservingWeaveTypes} from '../../../Browse2/browse2Util'; import {CellValue} from '../../../Browse2/CellValue'; import { @@ -42,10 +43,16 @@ import { import {DEFAULT_PAGE_SIZE} from '../../grid/pagination'; import {StyledDataGrid} from '../../StyledDataGrid'; import {CustomWeaveTypeProjectContext} from '../../typeViews/CustomWeaveTypeDispatcher'; +import {A} from '../common/Links'; import {TABLE_ID_EDGE_NAME} from '../wfReactInterface/constants'; import {useWFHooks} from '../wfReactInterface/context'; import {SortBy} from '../wfReactInterface/traceServerClientTypes'; +const RowId = styled.span` + font-family: 'Inconsolata', monospace; +`; +RowId.displayName = 'S.RowId'; + // Controls whether to use a table for arrays or not. export const USE_TABLE_FOR_ARRAYS = false; @@ -351,18 +358,20 @@ export const DataTableView: FC<{ if (props.onLinkClick) { res.push({ field: '_row_click', - headerName: '', + headerName: 'id', width: 50, - renderCell: params => ( - - props.onLinkClick!(propsDataRef.current[params.id as number]) - } - /> - ), + renderCell: params => { + const rowId = params.id as number; + const dataRefValue = propsDataRef.current[rowId]; + const {digest} = dataRefValue; + const rowLabel = digest ? digest.slice(-4) : rowId; + const rowSpan = ( + {rowLabel}} content={digest} /> + ); + return ( + props.onLinkClick!(dataRefValue)}>{rowSpan} + ); + }, }); } return [