#79 / Accessibility & Style fixes for Modal

components/pages/explorer/BamTable/ToggleButtonPanel.tsx

@@ -21,8 +21,8 @@
 
 import { css, useTheme } from '@emotion/react';
 import {
-	BamKeys,
-	BamDisplayNames as displayNames,
+	bamDisplayNames,
+	bamKeys,
 	type BamContext,
 	type BamKey,
 } from '@overture-stack/iobio-components/packages/iobio-react-components/';
@@ -47,6 +47,7 @@ export const ToggleButtonPanel = ({
 	const {
 		colors: { accent },
 	} = useTheme();
+	const contextKeys = bamKeys.filter((key) => bamContext.hasOwnProperty(key));
 	return (
 		<div
 			css={css`
@@ -68,8 +69,8 @@ export const ToggleButtonPanel = ({
 					flex-wrap: wrap;
 				`}
 			>
-				{BamKeys.map((key) => {
-					const active = bamContext[key];
+				{contextKeys.map((key) => {
+					const active = !!bamContext[key];
 					const toggleButtonStyles = getActiveButtonStyles({ active });
 
 					return (
@@ -85,10 +86,10 @@ export const ToggleButtonPanel = ({
 							`}
 							key={key}
 							onClick={() => {
-								onToggle(key, bamContext[key]);
+								onToggle(key, active);
 							}}
 						>
-							{displayNames[key]}
+							{bamDisplayNames[key]}
 						</button>
 					);
 				})}

components/pages/explorer/BamTable/index.tsx

@@ -23,7 +23,7 @@
 
 import { css, useTheme } from '@emotion/react';
 import {
-	BamDisplayNames as displayNames,
+	bamDisplayNames,
 	histogramKeys,
 	defaultBamContext as initElementState,
 	IobioCoverageDepth,
@@ -32,15 +32,19 @@ import {
 	IobioPercentBox,
 	isOutlierKey,
 	percentKeys,
+	IobioLabelInfoButton,
+	IobioPanel,
+	fileMetaDataSchema,
 	type BamContext,
+	type FileMetaData,
 } from '@overture-stack/iobio-components/packages/iobio-react-components/';
 import { useArrangerData } from '@overture-stack/arranger-components';
 import { useEffect, useState } from 'react';
 
 import Loader from '@/components/Loader';
 import { getConfig } from '@/global/config';
-import { type FileMetaData, type FileTableData } from '../fileTypes';
-import { getFileMetaData, IndexFileQuery, isFileResponse, isFileMetaData } from './scoreFileHelpers';
+import { type FileTableData } from '../fileTypes';
+import { getFileMetaData, IndexFileQuery, isFileResponse } from './scoreFileHelpers';
 import { ToggleButtonPanel } from './ToggleButtonPanel';
 import { StatsTable } from './StatsTable';
 
@@ -86,7 +90,7 @@ const BamTable = ({ file }: { file?: FileTableData }) => {
 					const indexFileNode = indexFileResponse.data.file.hits.edges[0];
 					const { fileMetaData, indexFileMetaData } = await getFileMetaData(file, indexFileNode);
 
-					if (isFileMetaData(fileMetaData)) {
+					if (fileMetaDataSchema.safeParse(fileMetaData).success) {
 						setFileMetaData(fileMetaData);
 						setIndexFileData(indexFileMetaData);
 					} else {
@@ -110,7 +114,7 @@ const BamTable = ({ file }: { file?: FileTableData }) => {
 
 	return (
 		<>
-			<h2>{fileId}</h2>
+			<h2>File Id: {fileId}</h2>
 			<ToggleButtonPanel bamContext={elementState} onToggle={updateElements} />
 			{loading || !fileUrl ? (
 				<Loader />
@@ -142,7 +146,8 @@ const BamTable = ({ file }: { file?: FileTableData }) => {
 											`}
 											key={key}
 										>
-											<IobioPercentBox label={displayNames[key]} percentKey={key} totalKey="total_reads" />
+											<IobioLabelInfoButton bamKey={key} />
+											<IobioPercentBox percentKey={key} totalKey="total_reads" />
 										</div>
 									),
 							)}
@@ -178,7 +183,10 @@ const BamTable = ({ file }: { file?: FileTableData }) => {
 											`}
 											key={key}
 										>
-											<IobioHistogram brokerKey={key} ignoreOutliers={isOutlierKey(key)} label={displayNames[key]} />
+											<IobioPanel>
+												<IobioLabelInfoButton key={key} />
+												<IobioHistogram brokerKey={key} ignoreOutliers={isOutlierKey(key)} />
+											</IobioPanel>
 										</div>
 									),
 							)}

components/pages/explorer/BamTable/scoreFileHelpers.tsx

@@ -24,21 +24,12 @@ import urlJoin from 'url-join';
 
 import { getConfig } from '@/global/config';
 import { SCORE_API_DOWNLOAD_PATH } from '@/global/utils/constants';
+import { type FileMetaData } from '@overture-stack/iobio-components/packages/iobio-react-components';
 
 import { baseScoreDownloadParams } from '../constants';
-import {
-	type FileMetaData,
-	type FileNode,
-	type FileTableData,
-	type FileResponse,
-	type ScoreDownloadParams,
-} from '../fileTypes';
+import { type FileNode, type FileTableData, type FileResponse, type ScoreDownloadParams } from '../fileTypes';
 
 // Type Checks for Score Data response
-export const isFileMetaData = (file: unknown): file is FileMetaData => {
-	return Boolean((file as FileMetaData)?.objectId && (file as FileMetaData)?.parts[0]?.url);
-};
-
 export const isFileResponse = (response: unknown): response is FileResponse => {
 	return Boolean((response as FileResponse)?.data?.file.hits);
 };

components/pages/explorer/Modal/components.tsx

@@ -28,9 +28,9 @@ import { BadgeItem, VisualizerDetailProps } from './types';
 
 const accentBadgeStyle = ({ theme, isDisabled }: { theme: Theme; isDisabled: boolean }) => css`
 	${badgeStyle({ theme, isDisabled })}
-	background-color: ${theme.colors.accent_light};
+	background-color: #497AA2;
 	margin-left: 5px;
-	${isDisabled ? `background-color: ${theme.colors.grey_5};` : ''}
+	${isDisabled ? `background-color:  #757575;` : ''}
 `;
 
 const badgeStyle = ({ theme, isDisabled }: { theme: Theme; isDisabled: boolean }) => css`
@@ -44,7 +44,7 @@ const badgeStyle = ({ theme, isDisabled }: { theme: Theme; isDisabled: boolean }
 	background-color: ${theme.colors.accent};
 	color: ${theme.colors.white};
 
-	${isDisabled ? `background-color: ${theme.colors.grey_6};` : ''}
+	${isDisabled ? `background-color: #353535;` : ''}
 `;
 
 const optionStyle = ({ theme, isEnabled }: { theme: Theme; isEnabled: boolean }) => css`
@@ -59,23 +59,25 @@ const optionStyle = ({ theme, isEnabled }: { theme: Theme; isEnabled: boolean })
 	padding: 10px;
 	position: relative;
 
-	${isEnabled ? '' : `cursor: not-allowed;`}
+	${isEnabled ? '' : `cursor: not-allowed; color: ${theme.colors.grey_6};`}
 `;
 
-export const VisualizerDetail = ({ title, description, previewImage, logoImage }: VisualizerDetailProps) => {
+export const VisualizerDetail = ({ description, isEnabled, logoImage, previewImage, title }: VisualizerDetailProps) => {
 	return (
 		<>
 			<div
 				css={css`
 					max-height: 28%;
 					overflow-y: hidden;
-
-					img {
-						width: 100%;
-					}
 				`}
 			>
-				<img src={previewImage} />
+				<img
+					css={css`
+						width: 100%;
+						${isEnabled ? '' : 'filter: grayscale(1);'}
+					`}
+					src={previewImage}
+				/>
 			</div>
 			<div
 				css={css`
@@ -87,6 +89,7 @@ export const VisualizerDetail = ({ title, description, previewImage, logoImage }
 						height: 18px;
 						vertical-align: text-bottom;
 						width: 18px;
+						${isEnabled ? '' : 'filter: grayscale(1);'}
 					`}
 					src={logoImage}
 				/>
@@ -144,10 +147,20 @@ export const VisualizerOption = ({
 }) => {
 	const theme = useTheme();
 	return (
-		<button css={optionStyle({ theme, isEnabled })} disabled={!isEnabled} onClick={onClick}>
+		<button
+			aria-label={`Select ${title} Visualizer`}
+			aria-disabled={!isEnabled}
+			css={optionStyle({ theme, isEnabled })}
+			onClick={onClick}
+		>
 			<div>
-				<VisualizerDetail title={title} description={description} previewImage={previewImage} logoImage={logoImage} />
-
+				<VisualizerDetail
+					isEnabled={isEnabled}
+					title={title}
+					description={description}
+					previewImage={previewImage}
+					logoImage={logoImage}
+				/>
 				<div
 					css={css`
 						position: absolute;
@@ -177,6 +190,15 @@ export const VisualizerOption = ({
 	);
 };
 
+const featureFlagError = (appName: string) =>
+	`The ${appName} Visualizer is not enabled. Please update your app configuration.`;
+const tooManyFilesError = (count: number) => {
+	const countText = count > 1 ? `${count} files` : `${count} file`;
+	return `Too many files are selected. Please select a maximum of ${countText} to launch plugin.`;
+};
+const wrongFileTypeError =
+	'This app does not support the file type you are using. Please choose a different app or use another file format.';
+
 /**
  *
  * Responsibility is rendering the options available
@@ -187,10 +209,12 @@ export const VisualizerModal = ({
 	closeModal,
 	setTable,
 	currentFiles,
+	setErrorMessage,
 }: {
 	closeModal: () => void;
 	setTable: (tableType: string) => void;
 	currentFiles: FileTableData[];
+	setErrorMessage: (s: string) => void;
 }) => {
 	const {
 		NEXT_PUBLIC_BASE_PATH,
@@ -204,10 +228,10 @@ export const VisualizerModal = ({
 	const isIobioEnabled =
 		NEXT_PUBLIC_IOBIO_ENABLED &&
 		currentFiles.length === 1 &&
-		currentFiles[0].file_type &&
+		currentFiles[0].file_type !== undefined &&
 		BamFileExtensions.includes(currentFiles[0].file_type);
 
-	const selectVisualizer = (tableType: string) => () => {
+	const selectVisualizer = (tableType: string) => {
 		setTable(tableType);
 		closeModal();
 	};
@@ -220,7 +244,18 @@ export const VisualizerModal = ({
 					{ label: '.VCF', isAccent: true },
 					{ label: '.BAM', isAccent: true },
 				]}
-				onClick={selectVisualizer(tableTypes.JBROWSE_TABLE)}
+				onClick={() => {
+					if (isJbrowseEnabled) {
+						selectVisualizer(tableTypes.JBROWSE_TABLE);
+					} else {
+						const errorMessage = !NEXT_PUBLIC_JBROWSE_ENABLED
+							? featureFlagError('JBrowse')
+							: !(currentFiles.length <= 5)
+							? tooManyFilesError(5)
+							: wrongFileTypeError;
+						setErrorMessage(errorMessage);
+					}
+				}}
 				isEnabled={isJbrowseEnabled}
 				details={{
 					title: 'JBrowse',
@@ -235,7 +270,18 @@ export const VisualizerModal = ({
 					{ label: '1 Max', isAccent: false },
 					{ label: '.BAM', isAccent: true },
 				]}
-				onClick={selectVisualizer(tableTypes.BAM_TABLE)}
+				onClick={() => {
+					if (isIobioEnabled) {
+						selectVisualizer(tableTypes.BAM_TABLE);
+					} else {
+						const errorMessage = !NEXT_PUBLIC_IOBIO_ENABLED
+							? featureFlagError('Iobio')
+							: !(currentFiles.length === 1)
+							? tooManyFilesError(1)
+							: wrongFileTypeError;
+						setErrorMessage(errorMessage);
+					}
+				}}
 				isEnabled={!!isIobioEnabled}
 				details={{
 					title: 'IOBIO',
@@ -257,7 +303,18 @@ export const VisualizerModal = ({
 					logoImage: urlJoin(NEXT_PUBLIC_BASE_PATH, '/images/cBioPortal_Logo.png'),
 				}}
 				isEnabled={isCBioEnabled}
-				onClick={selectVisualizer(tableTypes.CBIO_TABLE)}
+				onClick={() => {
+					if (isCBioEnabled) {
+						selectVisualizer(tableTypes.CBIO_TABLE);
+					} else {
+						const errorMessage = !NEXT_PUBLIC_CBIOPORTAL_ENABLED
+							? featureFlagError('cBioPortal')
+							: !(currentFiles.length <= 2)
+							? tooManyFilesError(2)
+							: wrongFileTypeError;
+						setErrorMessage(errorMessage);
+					}
+				}}
 			/>
 		</>
 	);

components/pages/explorer/Modal/index.tsx

@@ -2,20 +2,20 @@
  *
  * Copyright (c) 2025 The Ontario Institute for Cancer Research. All rights reserved
  *
- *  This program and the accompanying materials are made available under the terms of
- *  the GNU Affero General Public License v3.0. You should have received a copy of the
- *  GNU Affero General Public License along with this program.
- *   If not, see <http://www.gnu.org/licenses/>.
+ * This program and the accompanying materials are made available under the terms of
+ * the GNU Affero General Public License v3.0. You should have received a copy of the
+ * GNU Affero General Public License along with this program.
+ * If not, see <http://www.gnu.org/licenses/>.
  *
- *  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
- *  EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
- *  OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
- *  SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
- *  INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
- *  TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
- *  OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
- *  IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
- *  ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
+ * SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
+ * INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
+ * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
+ * IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
+ * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *
  */
 
@@ -30,11 +30,13 @@ const ModalContainer = ({
 	appRootId,
 	isModalOpen,
 	closeModal,
+	errorMessage,
 }: {
 	children: ReactNode;
 	closeModal: () => void;
 	appRootId: string;
 	isModalOpen: boolean;
+	errorMessage?: string;
 }) => {
 	useEffect(() => {
 		ReactModal.setAppElement(appRootId);
@@ -126,6 +128,18 @@ const ModalContainer = ({
 				>
 					{children}
 				</div>
+				<p
+					css={css`
+						color: #ad404e;
+						font-size: 14px;
+						font-weight: 500;
+						min-height: 14px;
+						line-height: 14px;
+						margin: 0.75rem 0.5rem;
+					`}
+				>
+					{errorMessage && errorMessage?.length > 1 ? errorMessage : ''}
+				</p>
 			</div>
 		</ReactModal>
 	);

components/pages/explorer/Modal/types.tsx

@@ -29,4 +29,5 @@ export type VisualizerDetailProps = {
 	description: string;
 	previewImage: string;
 	logoImage: string;
+	isEnabled?: boolean;
 };