Adds IGV Viewer as Gen3 App (#659)

* Add IGV BAM viewer with genomic visualization support

- Integrate `igv.js` library for BAM file viewing.
- Implement `IGVApp` and related components for genomic exploration.
- Enhance Explorer with `activeTab` support for routing.

* Add IGV BAM viewer with genomic visualization support

- Integrate `igv.js` library for BAM file viewing.
- Implement `IGVApp` and related components for genomic exploration.
- Enhance Explorer with `activeTab` support for routing.

* add igv type declarations

* add support for indexd

* fix table link to IVG App

* Refactor IGV components and enhance routing

- Modularized `IGVApp` with `IGVAppPage`, `IGVBamPicker`, and `IGVExplorerViewer`.
- Added new utility to handle multiple slashes in URLs.
- Improved link rendering in the CohortBuilder table with optimized URL sanitization.

* add igv app logo

Author: craigrbarnes

package-lock.json

@@ -17,6 +17,8 @@ export const GEN3_FENCE_API =
   process.env.NEXT_PUBLIC_GEN3_FENCE_API || `${GEN3_API}/user`;
 export const GEN3_FENCE_SERVICE =
   process.env.GEN3_FENCE_SERVICE || 'http://fence-service';
+export const GEN3_INDEXD_API =
+  process.env.NEXT_PUBLIC_GEN3_INDEXD_API || `${GEN3_API}/index`;
 export const GEN3_AI_SEARCH_API =
   process.env.NEXT_PUBLIC_GEN3_AI_SEARCH_API || `${GEN3_API}/ai-search`;
 export const GEN3_AUTHZ_API =

packages/core/src/constants.ts

@@ -28,7 +28,7 @@ interface PresignedUrlRequest {
   readonly what: string;
 }
 
-interface PresignedUrlResponse {
+export interface PresignedUrlResponse {
   readonly url: string;
 }
 

packages/core/src/features/fence/fenceApi.ts

@@ -2,6 +2,7 @@ import {
   type Gen3LoginProvider,
   logoutFence,
   type NameUrl,
+  type PresignedUrlResponse,
   useGetDownloadQuery,
   useGetLoginProvidersQuery,
   useGetPresignedUrlQuery,
@@ -31,6 +32,7 @@ export {
   type Gen3FenceCredentials,
   type Gen3LoginProvider,
   type NameUrl,
+  type PresignedUrlResponse,
   fetchFence,
   logoutFence,
   isFetchError,

packages/core/src/features/fence/index.ts

@@ -0,0 +1,17 @@
+import {
+  type IndexdResponse,
+  type IndexObject,
+  useGetIndexdMetdataQuery,
+  useGetIndexObjectQuery,
+  useLazyGetIndexdMetdataQuery,
+  useLazyGetIndexObjectQuery,
+} from './indexdSlice';
+
+export {
+  useGetIndexdMetdataQuery,
+  useLazyGetIndexdMetdataQuery,
+  useGetIndexObjectQuery,
+  useLazyGetIndexObjectQuery,
+  type IndexdResponse,
+  type IndexObject,
+};

packages/core/src/features/indexd/index.ts

@@ -0,0 +1,81 @@
+import { GEN3_INDEXD_API } from '../../constants';
+import { gen3Api } from '../gen3';
+import { KeyValuePair } from '../../types';
+
+export interface IndexdMetadataRequestParams {
+  limit?: number;
+  filters: KeyValuePair[];
+}
+
+export interface IndexObject {
+  acl: string[];
+  authz: string[];
+  baseid: string;
+  content_created_date: string | null;
+  content_updated_date: string | null;
+  created_date: string;
+  description: string | null;
+  did: string;
+  file_name: string;
+  form: string | null;
+  hashes: {
+    crc: string;
+    md5: string;
+    sha1: string;
+    sha256: string;
+    sha512: string;
+  };
+  metadata: Record<string, unknown>;
+  rev: string;
+  size: number;
+  updated_date: string;
+  uploader: string | null;
+  urls: string[];
+  urls_metadata: Record<string, Record<string, unknown>>;
+  version: string | null;
+}
+
+export interface IndexdResponse {
+  acl: string | null;
+  authz: string | null;
+  file_name: string | null;
+  hashes: string | null;
+  ids: string | null;
+  limit: number;
+  metadata: Record<string, unknown>;
+  page: number | null;
+  did: string;
+  size: number | null;
+  start: number | null;
+  urls: string[];
+  urls_metadata: string | null;
+  version: string | null;
+  records: Array<IndexObject>;
+}
+
+export const indexdApi = gen3Api.injectEndpoints({
+  endpoints: (builder) => ({
+    getIndexdMetdata: builder.query<
+      IndexdResponse,
+      IndexdMetadataRequestParams
+    >({
+      query: ({ filters, limit = 1000 }: IndexdMetadataRequestParams) => {
+        const query = filters.reduce(
+          (acc, filter) => `${acc}&${filter.key}=${filter.value}`,
+          '',
+        );
+        return `${GEN3_INDEXD_API}/index?${query}&limit=${limit}`;
+      },
+    }),
+    getIndexObject: builder.query<IndexObject, string>({
+      query: (guid) => `${GEN3_INDEXD_API}/index/${guid}`,
+    }),
+  }),
+});
+
+export const {
+  useGetIndexdMetdataQuery,
+  useLazyGetIndexdMetdataQuery,
+  useGetIndexObjectQuery,
+  useLazyGetIndexObjectQuery,
+} = indexdApi;

packages/core/src/features/indexd/indexdSlice.ts

@@ -3,6 +3,7 @@ import {
   CART_LIMIT,
   FILE_DELIMITERS,
   FILE_FORMATS,
+  GEN3_ANALYSIS_API,
   GEN3_API,
   GEN3_AUTHZ_API,
   GEN3_AUTHZ_SERVICE,
@@ -13,6 +14,7 @@ import {
   GEN3_FENCE_API,
   GEN3_FENCE_SERVICE,
   GEN3_GUPPY_API,
+  GEN3_INDEXD_API,
   GEN3_MANIFEST_API,
   GEN3_MDS_API,
   GEN3_REDIRECT_URL,
@@ -52,6 +54,7 @@ export * from './features/workspace';
 export * from './features/cart';
 export * from './features/config';
 export * from './features/cohortComparison';
+export * from './features/indexd';
 
 export {
   type CoreState,
@@ -62,6 +65,7 @@ export {
   GEN3_GUPPY_API,
   GEN3_FENCE_API,
   GEN3_FENCE_SERVICE,
+  GEN3_INDEXD_API,
   GEN3_AUTHZ_API,
   GEN3_AUTHZ_SERVICE,
   GEN3_MDS_API,
@@ -71,6 +75,7 @@ export {
   GEN3_CROSSWALK_API,
   GEN3_SOWER_API,
   GEN3_MANIFEST_API,
+  GEN3_ANALYSIS_API,
   CART_LIMIT,
   FILE_DELIMITERS,
   FILE_FORMATS,

packages/core/src/index.ts

@@ -277,3 +277,8 @@ export interface DataFetchingStatus {
 }
 
 export type DataFetchingHook<T> = () => DataFetchingResult<T>;
+
+export interface KeyValuePair {
+  key: string;
+  value: string;
+}

packages/core/src/types/types.ts

@@ -91,6 +91,7 @@
     "graphiql": "^3.7.1",
     "graphql": "^16.9.0",
     "graphql-ws": "^5.14.0",
+    "igv": "^3.7.3",
     "isomorphic-dompurify": "^2.32.0",
     "jose": "^6.1.0",
     "js-cookie": "^3.0.5",

packages/frontend/package.json

@@ -4,6 +4,7 @@ export { registerMetadataSchemaApp } from '../features/Dictionary/metadata/regis
 export { registerCohortDiscoveryApp } from '../features/CohortDiscovery/registerApp';
 export { registerExplorerDefaultCellRenderers } from '../features/CohortBuilder/ExplorerTable/ExplorerTableCellRenderers';
 export { registerCohortBuilderDefaultPreviewRenderers } from '../features/CohortBuilder/ExplorerTable/ExploreTableDetails/ExplorerTableDetailsPanelFactory';
+export { registerIGVApp } from '../features/genomic/igv/registerApp';
 export { type TenStringArray } from '../utils/types';
 export {
   createMantineTheme,