Merge branch '791-add-ispyb-logo-for-each-mx-dataset' into 'main'

Resolve "Add ISPyB logo for each MX Dataset"

Closes #791

See merge request !687

apps/mx/src/viewers/MXInvestigationViewer.tsx

@@ -160,6 +160,11 @@ export default function MXInvestigationViewer({
                   sampleIdNumber ? [sampleIdNumber.toString()] : undefined
                 }
                 parameterFilter={parametersFilters}
+                paginationBarLogo={{
+                  src: '/images/ispyb/black_logo_ispyb.gif',
+                  alt: 'ISPyB',
+                  url: 'https://doi.org/10.1093/bioinformatics/btr535',
+                }}
               />
             </>
           )}

packages/core/src/components/dataset/generic/DatasetList.tsx

@@ -13,6 +13,7 @@ import { Loading, NoData } from 'components/utils';
 import { DatasetViewerType, useViewers } from 'context';
 import { formatDateToDay } from 'helpers';
 import { PaginationMenu, useEndpointPagination, useParam } from 'hooks';
+import { LogoHeaderType } from 'components/utils/LogoHeader';
 import React, {
   Suspense,
   useCallback,
@@ -30,6 +31,7 @@ export function DatasetList(
     showInvestigation?: boolean;
     parameterFilter?: string;
     datasetViewerType?: DatasetViewerType;
+    paginationBarLogo?: LogoHeaderType;
   } & (
     | {
         groupBy: 'dataset';
@@ -46,12 +48,15 @@ export function DatasetList(
       }
   ),
 ) {
+  // State to handle scrolling to a specific sample
   const [scrollToSample, setScrollToSample] = useParam('scrollToSample', '');
 
+  // Callback to reset scroll state after scrolling is done
   const onScrollDone = useCallback(() => {
     setScrollToSample(undefined);
   }, [setScrollToSample]);
 
+  // Conditionally render datasets or samples based on `groupBy` argument
   switch (args.groupBy) {
     case 'dataset':
       if (args.datasets) {
@@ -95,6 +100,7 @@ export function DatasetList(
   }
 }
 
+// Component to load sample-based dataset lists dynamically
 function LoadDatasetListBySamples({
   instrumentName,
   investigationId,
@@ -103,6 +109,7 @@ function LoadDatasetListBySamples({
   showInvestigation,
   scrollToSampleId,
   onScrollDone,
+  paginationBarLogo,
 }: {
   instrumentName?: string;
   investigationId?: string;
@@ -111,7 +118,9 @@ function LoadDatasetListBySamples({
   showInvestigation?: boolean;
   scrollToSampleId?: string;
   onScrollDone?: () => void;
+  paginationBarLogo?: LogoHeaderType;
 }) {
+  // Construct API parameters
   const sampleListParams = useMemo(
     () => ({
       ...(investigationId ? { investigationId: Number(investigationId) } : {}),
@@ -159,7 +168,11 @@ function LoadDatasetListBySamples({
 
   return (
     <Col>
-      <PaginationMenu {...samples} showScrollToBottom />
+      <PaginationMenu
+        {...samples}
+        showScrollToBottom
+        logo={paginationBarLogo}
+      />
       <Row>
         <SampleObjectList
           samples={samples.data}
@@ -267,6 +280,7 @@ function LoadDatasetListByDataset({
   sampleId,
   showInvestigation,
   datasetViewerType,
+  logoHeader,
 }: {
   instrumentName?: string;
   investigationId?: string;
@@ -277,6 +291,7 @@ function LoadDatasetListByDataset({
   sampleId?: string;
   showInvestigation?: boolean;
   datasetViewerType?: DatasetViewerType;
+  logoHeader?: LogoHeaderType;
 }) {
   const datasets = useEndpointPagination({
     endpoint: DATASET_LIST_ENDPOINT,
@@ -299,7 +314,7 @@ function LoadDatasetListByDataset({
 
   return (
     <Col>
-      <PaginationMenu {...datasets} showScrollToBottom />
+      <PaginationMenu {...datasets} showScrollToBottom logo={logoHeader} />
       <Row>
         <DatasetObjectList
           datasets={datasets.data}

packages/core/src/components/utils/LogoHeader.tsx

+/**
+ * This type defines an object used to display the logo in the pagination bar
+ * src will be the href of the image to be displayed
+ * alt is the alternative text
+ * url when it exists will be a link
+ */
+export type LogoHeaderType = {
+  src: string;
+  alt: string;
+  url?: string;
+};
+
+/**
+ * Component: LogoHeader
+ * Renders a logo image with an optional hyperlink.
+ *
+ * @param {string} props.header.src - Image source URL.
+ * @param {string} props.header.alt - Alternative text for the image.
+ * @param {string} [props.header.url] - Optional hyperlink URL.
+ */
+export function LogoHeader({ header }: { header: LogoHeaderType }) {
+  const { src, alt, url } = header;
+
+  // Create an image element
+  const img = <img src={src} alt={alt} />;
+
+  return (
+    <>
+      {/* If URL is provided, wrap image in an anchor tag */}
+      {url && (
+        <a href={url} target="_blank" rel="noreferrer">
+          {img}
+        </a>
+      )}
+      {/* If no URL, render only the image */}
+      {!url && { img }}
+    </>
+  );
+}

packages/core/src/hooks/pagination.tsx

@@ -16,6 +16,7 @@ import {
   faAngleDoubleDown,
   faAngleDoubleUp,
 } from '@fortawesome/free-solid-svg-icons';
+import { LogoHeader, LogoHeaderType } from 'components/utils/LogoHeader';
 
 export interface Pagination {
   page: number;
@@ -27,6 +28,7 @@ export interface Pagination {
   handlePageChange: (newPage: number) => void;
   handlePageSizeChange: (newSize: number) => void;
   availableSizes: number[];
+  logo?: LogoHeaderType;
 }
 
 export function PaginationMenu({
@@ -37,6 +39,7 @@ export function PaginationMenu({
   margin,
   showScrollToTop = false,
   showScrollToBottom = false,
+  logo,
 }: {
   pagination: Pagination;
   totalPages: number;
@@ -45,6 +48,7 @@ export function PaginationMenu({
   margin?: string;
   showScrollToTop?: boolean;
   showScrollToBottom?: boolean;
+  logo?: LogoHeaderType;
 }) {
   const canPrevious = pagination.page > 0;
   const canNext = pagination.page < totalPages - 1;
@@ -205,6 +209,11 @@ export function PaginationMenu({
           </Button>
         </Col>
       )}
+      {logo && (
+        <Col xs="auto" className="ms-auto">
+          <LogoHeader header={logo}></LogoHeader>
+        </Col>
+      )}
     </Row>
   );
 }