[DT-902] Replace DAC Column with Data Use Column in Data Library Data…

…set Table (#2705)
DataBiosphere · Nov 1, 2024 · e566c65 · e566c65
1 parent 455cfe9
commit e566c65
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 18 deletions.
diff --git a/src/components/dac_dataset_table/DACDatasetTableCellData.jsx b/src/components/dac_dataset_table/DACDatasetTableCellData.jsx
@@ -71,7 +71,7 @@ export function dataCustodianCellData({dataset, label = 'dataCustodianCellData'}
   };
 }
 
-export function dataUseCellData({dataset, label = 'dataUseCellData'}) {
+export function dataUseCellData({dataset, label = 'dataUseCellData', divClass = style['cell-data'], spanClass = style['data-use'], cellWidth = styles.cellWidths.dataUse, tooltipPlace = 'right'}) {
   const codesAndDescriptions = dataset.dataUse?.primary ? dataset.dataUse.primary.map((dataUse) => {
     if (dataUse.code === 'OTHER') {
       return {'code': `OTH1`, 'description': dataUse.description};
@@ -93,10 +93,10 @@ export function dataUseCellData({dataset, label = 'dataUseCellData'}) {
   }
   const codeList = codesAndDescriptions.map(du => du.code);
   const display =
-    <div className={style['cell-data']}>
-      <span className={style['data-use']} data-tip={true} data-for={`dataset-data-use-${dataset.datasetId}`}>{codeList.join(', ')}</span>
+    <div className={divClass}>
+      <span className={spanClass} data-tip={true} data-for={`dataset-data-use-${dataset.datasetId}`}>{codeList.join(', ')}</span>
       <ReactTooltip
-        place={'right'}
+        place={tooltipPlace}
         effect={'solid'}
         id={`dataset-data-use-${dataset.datasetId}`}>
         <ul>{codesAndDescriptions.map((translation, index) => {
@@ -108,7 +108,7 @@ export function dataUseCellData({dataset, label = 'dataUseCellData'}) {
     data: display,
     value: codeList.join(', '),
     id: `data-use-cell-data-${dataset.datasetId}`,
-    cellStyle: {width: styles.cellWidths.dataUse},
+    cellStyle: {width: cellWidth},
     label
   };
 }

diff --git a/src/components/data_search/DatasetSearch.css b/src/components/data_search/DatasetSearch.css
@@ -0,0 +1,5 @@
+.data-use-cell {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+}
diff --git a/src/components/data_search/DatasetSearchTableConstants.tsx b/src/components/data_search/DatasetSearchTableConstants.tsx
@@ -6,6 +6,8 @@ import {OverflowTooltip, tooltipStyle} from '../Tooltips';
 import {SnapshotSummaryModel} from 'src/types/tdrModel';
 import DatasetExportButton from './DatasetExportButton';
 import ReactTooltip from 'react-tooltip';
+import {dataUseCellData} from '../dac_dataset_table/DACDatasetTableCellData';
+import './DatasetSearch.css';
 
 export interface DatasetSearchTableTab<T> {
   key: string;
@@ -230,7 +232,7 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number
     dataType: string;
     donorSize: string;
     dataLocation: string;
-    dac: string;
+    dataUse: string;
     exportToTerra: number;
   }
   const cellWidths: CellWidths = {
@@ -243,7 +245,7 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number
     dataType: '15%',
     donorSize: '7%',
     dataLocation: '13%',
-    dac: '10%',
+    dataUse: '10%',
     exportToTerra: 100,
   };
   const isSelectable = (dataset: DatasetTerm) => dataset.accessManagement != 'open' && dataset.accessManagement != 'external';
@@ -402,18 +404,18 @@ export const makeDatasetTableHeader = (datasets: DatasetTerm[], selected: number
       }
     },
     {
-      label: 'DAC',
+      label: 'Data Use',
       sortable: true,
-      cellStyle: makeHeaderStyle(cellWidths.dac),
-      cellDataFn: (dataset: DatasetTerm) => ({
-        data: <OverflowTooltip place={'top'} tooltipText={dataset.dac?.dacName} id={`${dataset.datasetId}-dataset-dac`}>
-          {dataset.dac?.dacName}
-        </OverflowTooltip>,
-        value: dataset.dac?.dacName,
-        id: `${dataset.datasetId}-dac`,
-        style: makeRowStyle(cellWidths.dac),
-        label: `DAC for dataset ${dataset.datasetId}: ${dataset.dac?.dacName}`
-      })
+      cellStyle: makeHeaderStyle(cellWidths.dataUse),
+      cellDataFn: (dataset: DatasetTerm) => {
+        return dataUseCellData({
+          dataset,
+          label: `Data Use for dataset ${dataset.datasetId}: ${dataset.dataUse}`,
+          divClass: ['data-use-cell'],
+          spanClass: [],
+          cellWidth: cellWidths.dataUse,
+          tooltipPlace: 'top'});
+      }
     },
     {
       label: 'Export to Terra',