chore(ui): change dataset link (#3040)

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 => (
-          <LinkIcon
-            style={{
-              cursor: 'pointer',
-            }}
-            onClick={() =>
-              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 = (
+            <Tooltip trigger={<RowId>{rowLabel}</RowId>} content={digest} />
+          );
+          return (
+            <A onClick={() => props.onLinkClick!(dataRefValue)}>{rowSpan}</A>
+          );
+        },
       });
     }
     return [