Feature/complete dataset page styling

packages/web/src/components/DatasetDetails/DatasetDetailsRow.module.css

@@ -31,3 +31,14 @@
   /* Allow whitespace to be rendered (including carriage returns & new lines) */
   white-space: pre-wrap; 
 }
+
+.link {
+  text-decoration: none;
+  color: var(--aqua);
+}
+
+.link:hover {
+  text-decoration: underline;
+  color: var(--bright-aqua);
+}
+

packages/web/src/components/DatasetDetails/DatasetDetailsRow.tsx

@@ -9,6 +9,7 @@ interface DatasetMetadataRowProps {
     className?: string;
     name: string;
     value: string;
+    link?: string;
 }
 
 /**
@@ -19,10 +20,16 @@ export default function DatasetDetailsRow(props: DatasetMetadataRowProps) {
     return (
         <div className={classNames(props.className, styles.row)}>
             <Cell className={classNames(styles.cell, styles.key)} columnKey="key" width={1}>
-                <span> {props.name} </span>
+                <span>{props.name}</span>
             </Cell>
             <Cell className={classNames(styles.cell, styles.value)} columnKey="value" width={1}>
-                <span> {props.value} </span>
+                {props?.link ? (
+                    <a href={props?.link} className={styles.link} target="_blank" rel="noreferrer">
+                        {props.value}
+                    </a>
+                ) : (
+                    <span>{props.value}</span>
+                )}
             </Cell>
         </div>
     );

packages/web/src/components/DatasetDetails/index.tsx

@@ -6,7 +6,10 @@ import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 
 import DatasetDetailsRow from "./DatasetDetailsRow";
-import PublicDataset, { DATASET_DISPLAY_FIELDS } from "../../entity/PublicDataset";
+import PublicDataset, {
+    DATASET_DISPLAY_FIELDS,
+    DatasetAnnotations,
+} from "../../entity/PublicDataset";
 import { interaction, selection } from "../../../../core/state";
 import { getNameAndTypeFromSourceUrl, Source } from "../../../../core/entity/FileExplorerURL";
 
@@ -36,8 +39,15 @@ export default function DatasetDetails() {
         return DATASET_DISPLAY_FIELDS.reduce((accum, field) => {
             const fieldName = field.name;
             let datasetFieldValue;
+            let link;
             if (datasetDetails.details.hasOwnProperty(fieldName)) {
                 datasetFieldValue = _get(datasetDetails.details, fieldName);
+                if (
+                    (fieldName === DatasetAnnotations.RELATED_PUBLICATON.name ||
+                        fieldName === DatasetAnnotations.DOI.name) &&
+                    datasetDetails.details.hasOwnProperty(DatasetAnnotations.DOI.name)
+                )
+                    link = _get(datasetDetails.details, DatasetAnnotations.DOI.name);
             } else datasetFieldValue = "--"; // Still display field, just indicate no value provided
             const ret = [
                 ...accum,
@@ -46,6 +56,7 @@ export default function DatasetDetails() {
                     className={styles.row}
                     name={field.displayLabel}
                     value={datasetFieldValue}
+                    link={link || undefined}
                 />,
             ];
             return ret;

packages/web/src/components/DatasetDetails/test/DatasetDetails.test.tsx

@@ -72,6 +72,28 @@ describe("<DatasetDetails />", () => {
             expect(getByText(mockDataset.name)).to.exist;
             expect(getByText(mockDataset.description)).to.exist;
         });
+        it("renders links for ref publication and DOI if provided", () => {
+            const mockDataset = makePublicDatasetMock("test-id");
+
+            // Arrange
+            const { store } = configureMockStore({
+                state: mergeState(initialState, {
+                    interaction: {
+                        selectedPublicDataset: mockDataset,
+                    },
+                }),
+            });
+            const { getAllByRole } = render(
+                <Provider store={store}>
+                    <RouterProvider router={mockRouter} />
+                </Provider>
+            );
+
+            expect(getAllByRole("link").length).to.equal(2);
+            expect(getAllByRole("link").at(0)?.getAttribute("href")).to.equal(
+                mockDataset.details.doi
+            );
+        });
         it("displays indicator for undefined fields", () => {
             const sparseDataset = new PublicDataset({
                 dataset_name: "Sparse Dataset",

packages/web/src/components/OpenSourceDatasets/DatasetRow.tsx

@@ -1,7 +1,7 @@
 import { DefaultButton, IDetailsRowProps, IRenderFunction } from "@fluentui/react";
 import classNames from "classnames";
 import * as React from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 
 import PublicDataset from "../../entity/PublicDataset";
@@ -20,20 +20,24 @@ export default function DatasetRow(props: DatasetRowProps) {
     const navigate = useNavigate();
     const [showActions, setShowActions] = React.useState(true);
     const dataset = new PublicDataset(props.rowProps.item);
+    const currentGlobalURL = useSelector(selection.selectors.getEncodedFileExplorerUrl);
 
     const selectDataset = () => {
         dispatch(interaction.actions.setSelectedPublicDataset(dataset));
         dispatch(interaction.actions.showDatasetDetailsPanel());
     };
 
     const openDatasetInApp = (source: Source) => {
-        navigate("/app");
         dispatch(
             selection.actions.addQuery({
                 name: `New ${source.name} Query on ${dataset?.name || "open-source dataset"}`,
                 parts: { source },
             })
         );
+        navigate({
+            pathname: "/app",
+            search: `?${currentGlobalURL}`,
+        });
     };
 
     const loadDataset = () => {
@@ -65,7 +69,7 @@ export default function DatasetRow(props: DatasetRowProps) {
                 })}
             >
                 <DefaultButton
-                    className={classNames(styles.button)}
+                    className={styles.button}
                     styles={{
                         label: styles.buttonLabel,
                     }}
@@ -74,7 +78,7 @@ export default function DatasetRow(props: DatasetRowProps) {
                     text="DETAILS"
                 />
                 <DefaultButton
-                    className={classNames(styles.button)}
+                    className={styles.button}
                     styles={{
                         label: styles.buttonLabel,
                         icon: styles.buttonIcon,

packages/web/src/components/OpenSourceDatasets/DatasetTable.module.css

@@ -15,10 +15,11 @@
   font-weight: 400;
 }
 
-.table-header > div:hover, .table-header span:hover {
-  background-color: var(--secondary-dark);
-  background: var(--secondary-dark);
+.table-header span:hover {
+  background-color: var(--primary-dark);
+  background: var(--primary-dark);
   color: var(--secondary-text-color);
+  cursor: pointer;
 }
 
 .double-line {
@@ -42,3 +43,13 @@
   font-size: 14px;
   text-align: center;
 }
+
+.link {
+  text-decoration: none;
+  color: var(--aqua);
+}
+
+.link:hover {
+  text-decoration: underline;
+  color: var(--bright-aqua);
+}

packages/web/src/components/OpenSourceDatasets/DatasetTable.tsx

@@ -8,13 +8,18 @@ import {
     ThemeProvider,
 } from "@fluentui/react";
 import { ShimmeredDetailsList } from "@fluentui/react/lib/ShimmeredDetailsList";
+import classNames from "classnames";
 import * as React from "react";
 
-import { DatasetColumns } from "./DatasetColumns";
 import DatasetRow from "./DatasetRow";
 import useDatasetDetails from "./useDatasetDetails";
-import { PublicDatasetProps } from "../../entity/PublicDataset";
+import {
+    PublicDatasetProps,
+    DATASET_TABLE_FIELDS,
+    DatasetAnnotations,
+} from "../../entity/PublicDataset";
 import FileFilter from "../../../../core/entity/FileFilter";
+import FileSort, { SortOrder } from "../../../../core/entity/FileSort";
 
 import styles from "./DatasetTable.module.css";
 
@@ -23,9 +28,25 @@ interface DatasetTableProps {
 }
 
 export default function DatasetTable(props: DatasetTableProps) {
-    const [datasetDetails, isLoading, error] = useDatasetDetails(props?.filters || []);
-
-    const items = datasetDetails?.map((detail) => detail.details);
+    const [sortColumn, setSortColumn] = React.useState<FileSort | undefined>(undefined);
+    const columns = DATASET_TABLE_FIELDS.map(
+        (value, index): IColumn => {
+            return {
+                key: `column${index}`,
+                name: value.displayLabel.toUpperCase(),
+                fieldName: value.name,
+                isResizable: true,
+                minWidth: value?.minWidth,
+                isSorted: sortColumn?.annotationName == value.displayLabel,
+                isSortedDescending: sortColumn?.order == SortOrder.DESC,
+                onColumnClick: () => onColumnClick(value.displayLabel),
+            };
+        }
+    );
+    const [datasetDetails, isLoading, error] = useDatasetDetails(props?.filters || [], sortColumn);
+    const items = React.useMemo(() => {
+        return datasetDetails?.map((detail) => detail.details);
+    }, [datasetDetails]);
 
     const renderRow = (
         rowProps: IDetailsRowProps | undefined,
@@ -54,16 +75,37 @@ export default function DatasetTable(props: DatasetTableProps) {
     ) {
         const fieldContent = item[column?.fieldName as keyof PublicDatasetProps] as string;
         if (!fieldContent) return <>--</>;
+        if (
+            column?.fieldName === DatasetAnnotations.RELATED_PUBLICATON.name &&
+            item?.[DatasetAnnotations.DOI.name as keyof PublicDatasetProps]
+        ) {
+            return (
+                <a
+                    className={classNames(styles.link, styles.doubleLine)}
+                    href={item[DatasetAnnotations.DOI.name as keyof PublicDatasetProps]}
+                >
+                    {fieldContent}
+                </a>
+            );
+        }
         return <div className={styles.doubleLine}>{fieldContent}</div>;
     }
 
+    function onColumnClick(columnName: string) {
+        let sortOrder = SortOrder.ASC;
+        if (sortColumn?.annotationName == columnName)
+            sortOrder = sortColumn.order == SortOrder.DESC ? SortOrder.ASC : SortOrder.DESC;
+        const newSortColumn = new FileSort(columnName, sortOrder);
+        setSortColumn(newSortColumn);
+    }
+
     return (
         <div className={styles.table}>
             <ThemeProvider theme={shimmeredDetailsListTheme}>
                 <ShimmeredDetailsList
                     setKey="items"
                     items={items || []}
-                    columns={DatasetColumns}
+                    columns={columns}
                     isHeaderVisible={true}
                     selectionMode={SelectionMode.none}
                     enableShimmer={isLoading}