Update unit tests and add links to dataset details

AllenInstitute · Jun 18, 2024 · c55571e · c55571e
1 parent ddfd1ae
commit c55571e
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 10 deletions.
diff --git a/packages/web/src/components/DatasetDetails/DatasetDetailsRow.module.css b/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);
+}
+
diff --git a/packages/web/src/components/DatasetDetails/DatasetDetailsRow.tsx b/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>
     );

diff --git a/packages/web/src/components/DatasetDetails/index.tsx b/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;

diff --git a/packages/web/src/components/DatasetDetails/test/DatasetDetails.test.tsx b/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",

diff --git a/packages/web/src/components/OpenSourceDatasets/DatasetRow.tsx b/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,

diff --git a/packages/web/src/components/OpenSourceDatasets/DatasetTable.module.css b/packages/web/src/components/OpenSourceDatasets/DatasetTable.module.css
@@ -43,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);
+}
diff --git a/packages/web/src/components/OpenSourceDatasets/DatasetTable.tsx b/packages/web/src/components/OpenSourceDatasets/DatasetTable.tsx
@@ -8,11 +8,16 @@ import {
     ThemeProvider,
 } from "@fluentui/react";
 import { ShimmeredDetailsList } from "@fluentui/react/lib/ShimmeredDetailsList";
+import classNames from "classnames";
 import * as React from "react";
 
 import DatasetRow from "./DatasetRow";
 import useDatasetDetails from "./useDatasetDetails";
-import { PublicDatasetProps, DATASET_TABLE_FIELDS } 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";
 
@@ -70,6 +75,19 @@ 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>;
     }
 

diff --git a/packages/web/src/components/OpenSourceDatasets/test/DatasetTable.test.tsx b/packages/web/src/components/OpenSourceDatasets/test/DatasetTable.test.tsx
@@ -1,5 +1,5 @@
 import { configureMockStore, mergeState } from "@aics/redux-utils";
-import { render } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import { expect } from "chai";
 import * as React from "react";
 import { Provider } from "react-redux";
@@ -8,10 +8,11 @@ import { createSandbox } from "sinon";
 
 import DatasetTable from "../DatasetTable";
 import * as useDatasetDetails from "../useDatasetDetails";
-import { DATASET_TABLE_FIELDS } from "../../../entity/PublicDataset";
+import { DATASET_TABLE_FIELDS, DatasetAnnotations } from "../../../entity/PublicDataset";
 import { makePublicDatasetMock } from "../../../entity/PublicDataset/mocks";
 import { initialState } from "../../../../../core/state";
 import DatabaseFileService from "../../../../../core/services/FileService/DatabaseFileService";
+import FileSort, { SortOrder } from "../../../../../core/entity/FileSort";
 
 describe("<DatasetTable />", () => {
     const sandbox = createSandbox();
@@ -102,4 +103,35 @@ describe("<DatasetTable />", () => {
         expect(getAllByRole("row").length).to.equal(mockIdList.length + 1);
         expect(useDatasetDetailsStub.called).to.be.true;
     });
+
+    it("sorts on column header click", async () => {
+        const getSpy = sandbox.spy(useDatasetDetails, "default");
+
+        const { getByText } = render(
+            <Provider store={store}>
+                <RouterProvider router={mockRouter} />
+            </Provider>
+        );
+
+        const mockFileSortAsc = new FileSort(
+            DatasetAnnotations.DATASET_NAME.displayLabel,
+            SortOrder.ASC
+        );
+        const mockFileSortDesc = new FileSort(
+            DatasetAnnotations.DATASET_NAME.displayLabel,
+            SortOrder.DESC
+        );
+        const mockFileSortAscCount = new FileSort(
+            DatasetAnnotations.FILE_COUNT.displayLabel,
+            SortOrder.ASC
+        );
+
+        // Act / Assert
+        fireEvent.click(getByText(/Dataset Name/i));
+        expect(getSpy.calledWith([], mockFileSortAsc)).to.be.true;
+        fireEvent.click(getByText(/Dataset Name/i));
+        expect(getSpy.calledWith([], mockFileSortDesc)).to.be.true;
+        fireEvent.click(getByText(/File count/i));
+        expect(getSpy.calledWith([], mockFileSortAscCount)).to.be.true;
+    });
 });