WIP: Feat / 48 Configurable Jbrowse Wrapper

.env.schema

@@ -24,3 +24,4 @@ NEXT_PUBLIC_SCORE_API_URL=
 ######## Jbrowse
 NEXT_PUBLIC_JBROWSE_GENOME_URL_ROOT=
 NEXT_PUBLIC_JBROWSE_GENOME_ALIASES_URL_ROOT=
+NEXT_PUBLIC_JBROWSE_DATA_MODEL=

.env.test

@@ -9,4 +9,7 @@ NEXT_PUBLIC_ARRANGER_DOCUMENT_TYPE=file
 NEXT_PUBLIC_ARRANGER_INDEX=file-centric
 
 # ######## Optional features/functionalities
-NEXT_PUBLIC_DEBUG=true
+NEXT_PUBLIC_DEBUG=true
+
+# Testing Jbrowse Env Queries
+NEXT_PUBLIC_JBROWSE_DATA_MODEL=analysis { hits { edges { node { analysis_id files { hits { edges { node { data_type object_id name size fileType file_access  } } } } id } } total } }

components/pages/explorer/Jbrowse/JbrowseWrapper.tsx

@@ -28,6 +28,7 @@ import { css, useTheme } from '@emotion/react';
 import { useTableContext } from '@overture-stack/arranger-components';
 import { JbrowseCircular, JbrowseLinear } from '@overture-stack/dms-jbrowse-components';
 import SQON from '@overture-stack/sqon-builder';
+import jsonpath from 'jsonpath';
 import { find } from 'lodash';
 import { useEffect, useState } from 'react';
 import urlJoin from 'url-join';
@@ -40,42 +41,29 @@ import {
 	JbrowseQueryNode,
 	ScoreDownloadParams,
 	ScoreDownloadResult,
+	TableData,
+	TableNodes,
 } from './types';
 import useJbrowseCompatibility from './useJbrowseCompatibility';
 import {
 	checkJbrowseCompatibility,
+	fileQuery,
 	jbrowseAssemblyName,
 	jbrowseErrors,
+	JbrowseFileAccess,
+	JbrowseFileTypes,
 	JbrowseTypeName,
 	JbrowseTypeNames,
 } from './utils';
-const { NEXT_PUBLIC_SCORE_API_URL } = getConfig();
+
+const { NEXT_PUBLIC_SCORE_API_URL, NEXT_PUBLIC_JBROWSE_DATA_MODEL } = getConfig();
 const arrangerFetcher = createArrangerFetcher({});
 
 // request data for jbrowse display and
 // score /download request to get signed URLs
-const jbrowseInputQuery = `
-query jbrowseInput($filters:JSON){
-  file {
-    hits (filters: $filters){
-      total 
-      edges {
-        node {
-          file_access
-          file_type
-          object_id
-          file {
-            name
-            size
-            index_file {
-              object_id
-              size
-            }
-          }
-        }
-      }
-    }
-  }
+const jbrowseInputQuery = (dataQuery: string) => `
+query jbrowseInput {
+  ${dataQuery}
 }
 `;
 
@@ -128,53 +116,94 @@ const JbrowseEl = ({ activeJbrowseType }: { activeJbrowseType: JbrowseTypeName }
 		console.error(error);
 	};
 
+	const jBrowseCompatibilityFilter = ({
+		node: {
+			file_access,
+			file_type,
+			file: { index_file },
+		},
+	}: {
+		node: JbrowseQueryNode;
+	}) =>
+		checkJbrowseCompatibility({
+			file_access,
+			file_type,
+			index_file,
+			jbrowseType: activeJbrowseType,
+		});
+
+	const mapJbrowseFiles = ({ node }: { node: JbrowseQueryNode }): JbrowseCompatibleFile => ({
+		fileId: node.object_id,
+		fileName: node.file.name,
+		fileSize: node.file.size,
+		fileType: node.file_type,
+		// files without an index were filtered out above.
+		// falsey handling is for typescript only.
+		indexId: node.file.index_file?.object_id || '',
+		indexSize: node.file.index_file?.size || 0,
+	});
+
 	useEffect(() => {
 		// step 1: get compatible files
 
 		setLoading(true);
 
+		const dataQuery = NEXT_PUBLIC_JBROWSE_DATA_MODEL || fileQuery;
+		const variables = {
+			filters: {
+				first: 20,
+				offset: 0,
+				score: '',
+				sort: [{ fieldName: 'analysis_id', order: 'asc' }],
+				sqon: SQON.in('object_id', selectedRows),
+			},
+		};
+		const query = jbrowseInputQuery(dataQuery);
+
 		// fetch metadata from arranger for selected files
 		arrangerFetcher({
 			endpoint: 'graphql/JBrowseDataQuery',
 			body: JSON.stringify({
-				variables: {
-					filters: SQON.in('object_id', selectedRows),
-				},
-				query: jbrowseInputQuery,
+				variables,
+				query,
 			}),
 		})
 			.then(({ data }) => {
+				const isDefaultDataModel = !NEXT_PUBLIC_JBROWSE_DATA_MODEL;
+
+				const nodes = isDefaultDataModel
+					? data.file?.hits?.edges
+					: jsonpath
+							.query(data, '$..edges')[0]
+							.map(({ node }: TableNodes) => {
+								const files = node.files?.hits?.edges.map((data: TableData) => {
+									// Map for Compatibility
+									// Based on Table Data Query
+									const { object_id, name, size, fileType, file_access } = data.node;
+									const jbrowseFile: JbrowseQueryNode = {
+										file_type: fileType as JbrowseFileTypes,
+										file_access: file_access as JbrowseFileAccess,
+										object_id,
+										file: {
+											name,
+											size,
+											index_file: {
+												object_id,
+												size,
+											},
+										},
+									};
+									return { node: jbrowseFile };
+								});
+								return files;
+							})
+							.flat();
+
 				// restructure compatible files list for jbrowse's API
-				const nextJbrowseCompatibleFiles = (data.file?.hits?.edges || [])
-					.filter(
-						({
-							node: {
-								file_access,
-								file_type,
-								file: { index_file },
-							},
-						}: {
-							node: JbrowseQueryNode;
-						}) =>
-							checkJbrowseCompatibility({
-								file_access,
-								file_type,
-								index_file,
-								jbrowseType: activeJbrowseType,
-							}),
-					)
-					.map(
-						({ node }: { node: JbrowseQueryNode }): JbrowseCompatibleFile => ({
-							fileId: node.object_id,
-							fileName: node.file.name,
-							fileSize: node.file.size,
-							fileType: node.file_type,
-							// files without an index were filtered out above.
-							// falsey handling is for typescript only.
-							indexId: node.file.index_file?.object_id || '',
-							indexSize: node.file.index_file?.size || 0,
-						}),
-					);
+				const nextJbrowseCompatibleFiles = nodes
+					.filter(jBrowseCompatibilityFilter)
+					.map(mapJbrowseFiles);
+
 				setCompatibleFiles(nextJbrowseCompatibleFiles);
 			})
 			.catch((error: Error) => handleError(error));

components/pages/explorer/Jbrowse/types.ts

@@ -94,3 +94,25 @@ export type JbrowseInput = JbrowseFileType &
 	};
 
 export type JbrowseCompatibleFile = ScoreDownloadJbrowseInput & JbrowseFileName & JbrowseFileType;
+
+// Example Query Objects for configurable env queries
+export type TableData = {
+	node: {
+		data_type: string;
+		object_id: string;
+		name: string;
+		size: number;
+		fileType: string;
+		file_access: string;
+	};
+};
+
+export type TableNodes = {
+	node: {
+		files: {
+			hits: {
+				edges: TableData[];
+			};
+		};
+	};
+};

components/pages/explorer/Jbrowse/utils.tsx

@@ -104,6 +104,27 @@ export const jbrowseFileMetadataQuery = `
 }
 `;
 
+export const fileQuery = `file {
+	hits (filters: $filters){
+		total 
+		edges {
+			node {
+				file_access
+				file_type
+				object_id
+				file {
+					name
+					size
+					index_file {
+						object_id
+						size
+					}
+				}
+			}
+		}
+	}
+}`;
+
 // check if file is the right type for jbrowse
 // and that it has an index
 // MVP: restrict controlled access files

global/config.ts

@@ -45,6 +45,7 @@ export const getConfig = () => {
 		NEXT_PUBLIC_JBROWSE_GENOME_URL_ROOT: publicConfig.NEXT_PUBLIC_JBROWSE_GENOME_URL_ROOT || '',
 		NEXT_PUBLIC_JBROWSE_GENOME_ALIASES_URL_ROOT:
 			publicConfig.NEXT_PUBLIC_JBROWSE_GENOME_ALIASES_URL_ROOT || '',
+		NEXT_PUBLIC_JBROWSE_DATA_MODEL: publicConfig.NEXT_PUBLIC_JBROWSE_DATA_MODEL || '',
 		NEXT_PUBLIC_SHOW_MOBILE_WARNING: publicConfig.NEXT_PUBLIC_SHOW_MOBILE_WARNING === 'true',
 	} as {
 		NEXT_PUBLIC_EGO_API_ROOT: string;
@@ -64,6 +65,7 @@ export const getConfig = () => {
 		NEXT_PUBLIC_SCORE_API_URL: string;
 		NEXT_PUBLIC_JBROWSE_GENOME_URL_ROOT: string;
 		NEXT_PUBLIC_JBROWSE_GENOME_ALIASES_URL_ROOT: string;
+		NEXT_PUBLIC_JBROWSE_DATA_MODEL: string;
 		NEXT_PUBLIC_SHOW_MOBILE_WARNING: boolean;
 	};
 };

next.config.js

@@ -62,6 +62,7 @@ module.exports = withPlugins([withTranspileModules], {
 		// Optional features/functionalities
 		NEXT_PUBLIC_DEBUG: process.env.NEXT_PUBLIC_DEBUG,
 		NEXT_PUBLIC_SHOW_MOBILE_WARNING: process.env.NEXT_PUBLIC_SHOW_MOBILE_WARNING,
+		NEXT_PUBLIC_JBROWSE_DATA_MODEL: process.env.NEXT_PUBLIC_JBROWSE_DATA_MODEL,
 	},
 	assetPrefix: process.env.ASSET_PREFIX || '',
 	optimizeFonts: false,

package.json

@@ -18,6 +18,7 @@
 		"@overture-stack/dms-jbrowse-components": "^0.1.0-beta.4",
 		"@overture-stack/sqon-builder": "^0.0.0",
 		"axios": "^0.27.2",
+		"jsonpath": "^1.1.1",
 		"jsonwebtoken": "^8.5.1",
 		"jwt-decode": "^3.1.2",
 		"lodash": "^4.17.21",
@@ -36,6 +37,7 @@
 	"devDependencies": {
 		"@babel/preset-typescript": "^7.21.0",
 		"@emotion/babel-plugin": "^11.9.2",
+		"@types/jsonpath": "^0.2.4",
 		"@types/lodash": "^4.14.182",
 		"@types/node": "^17.0.35",
 		"@types/react": "^17.0.63",