Merge branch 'develop' into Feature-Mega-Menu

custom.d.ts

@@ -38,6 +38,7 @@ declare module 'igv' {
  data: { name: string; value: string | number }[]
  ) => unknown
  ) => void;
+ search: (searchTerm: string) => void;
  loadTrack: (trackConfig: unknown) => void;
  removeTrackByName: (trackName: string) => void;
  findTracks: (attr: string, val: string) => any;

package.json

@@ -1,6 +1,6 @@
 {
  "name": "mgportalv2",
- "version": "2.0.31",
+ "version": "2.0.33",
  "description": "Web Client for the Mgnify service at EBI",
  "homepage": "https://github.com/EBI-Metagenomics/ebi-metagenomics-client#readme",
  "main": "src/index.tsx",
@@ -36,7 +36,7 @@
  "@sentry/react": "^6.17.2",
  "@sentry/tracing": "^6.17.2",
  "@tippyjs/react": "4.2.6",
- "@visual-framework/vf-mega-menu": "^1.0.0-alpha.1",
+ "@visual-framework/vf-banner-elixir": "^1.0.0-alpha.2",
  "axios": "^1.5.1",
  "dexie": "3.2.2",
  "dexie-react-hooks": "1.1.1",

public/index.html

@@ -17,6 +17,10 @@
  type="text/css"
  media="all"
  />
+ <link
+ rel="stylesheet"
+ href="https://stable.visual-framework.dev/assets/vf-banner-elixir/vf-banner-elixir.css"
+ />
  <title><%= htmlWebpackPlugin.options.title %></title>
 
  <!-- TODO: remove this script when no longer using GH Pages -->

src/App.tsx

@@ -1,5 +1,5 @@
-import React, { Suspense, lazy, useState, useMemo } from 'react';
-import { Routes, Route, BrowserRouter } from 'react-router-dom';
+import React, { Suspense, lazy, useState, useMemo, useEffect } from 'react';
+import { Routes, Route, BrowserRouter, useLocation } from 'react-router-dom';
 
 import config from 'utils/config';
 import EBIHeader from 'components/UI/EBIHeader';
@@ -41,6 +41,15 @@ const Assembly = lazy(() => import('./pages/Assembly'));
 const Pipelines = lazy(() => import('./pages/Pipelines'));
 const Analysis = lazy(() => import('./pages/Analysis'));
 
+const ResetScroll = () => {
+ const { pathname } = useLocation();
+
+ useEffect(() => {
+ window.scrollTo(0, 0);
+ }, [pathname]);
+ return null;
+};
+
 const App: React.FC = () => {
  const [user, setUser] = useState({
  username: null,
@@ -72,6 +81,7 @@ const App: React.FC = () => {
  <MainMenu />
  <div className="vf-body vf-u-margin__top--400 vf-u-margin__bottom--800">
  <ErrorBoundary>
+ <ResetScroll />
  <Suspense fallback={<Loading size="large" />}>
  <Routes>
  <Route path="/" element={<Home />} />

src/components/Analysis/ContigViewer/Table/index.tsx

@@ -75,7 +75,7 @@ const ContigsTable: React.FC = () => {
  );
 
  const { overviewData: analysisOverviewData } = useContext(AnalysisContext);
- const assemblyId = analysisOverviewData.relationships.assembly.data.id;
+ const assemblyId = analysisOverviewData.relationships.assembly?.data?.id;
  const { crates, loading: loadingCrates } = useCrates(
  `assemblies/${assemblyId}/extra-annotations`
  );

src/components/Analysis/Functional/InterPro/QCChart.tsx

@@ -16,15 +16,15 @@ function getSeriesCategory(
  seqData: { key: string; value: string }[],
  category: string
 ) {
- let series = seqData.find(({ key }) => key === category);
+ let series = seqData?.find(({ key }) => key === category);
  if (series !== undefined) {
  return series.value;
  }
- series = seqData.find(({ key }) => key === `Contigs${category}`);
+ series = seqData?.find(({ key }) => key === `Contigs${category}`);
  if (series !== undefined) {
  return series.value;
  }
- series = seqData.find(({ key }) => key === `Reads${category}`);
+ series = seqData?.find(({ key }) => key === `Reads${category}`);
  if (series !== undefined) {
  return series.value;
  }

src/components/Genomes/Browser/Popup/index.tsx

@@ -31,9 +31,10 @@ const MultipleField: React.FC<{
  value: string;
  url?: string;
  decodeValue?: boolean;
-}> = ({ value, url, decodeValue }) => {
+ filterValue?: (value: string) => boolean;
+}> = ({ value, url, decodeValue, filterValue = () => true }) => {
  if (!value) return null;
- const parts = value.split(',');
+ const parts = value.split(',').filter(filterValue);
  return (
  <ul className="vf-list">
  {parts.map((part) => {
@@ -95,18 +96,24 @@ const formatData = (rawData: PropertyDataType[]): FormattedData => {
  el.value === null ? null : String(el.value);
  return memo;
  }, {});
+ // TODO: Implement using something similar to the TrackColourPicker.FORMAT to handle differences
+ const ecnumber = attributes.ec_number || attributes.ecnumber;
 
  const functionalData = {
  title: 'Functional annotation',
  data: [
  {
  name: 'E.C Number',
  Value:
- attributes.ecnumber &&
+ ecnumber &&
  (() => (
  <MultipleField
- value={attributes.ecnumber}
+ value={ecnumber}
  url="https://enzyme.expasy.org/EC/"
+ filterValue={(ecNumber) => {
+ // https://en.wikipedia.org/wiki/Enzyme_Commission_number
+ return /[n\d-]+\.[n\d-]+\.[n\d-]+\.[n\d-]+/.test(ecNumber);
+ }}
  />
  )),
  },
@@ -118,6 +125,9 @@ const formatData = (rawData: PropertyDataType[]): FormattedData => {
  <MultipleField
  value={attributes.pfam}
  url="https://www.ebi.ac.uk/interpro/entry/pfam/"
+ filterValue={(pfamAccession) => {
+ return pfamAccession.startsWith('PF');
+ }}
  />
  )),
  },
@@ -129,6 +139,9 @@ const formatData = (rawData: PropertyDataType[]): FormattedData => {
  <MultipleField
  value={attributes.kegg}
  url="https://www.genome.jp/dbget-bin/www_bget?"
+ filterValue={(keggAccession) => {
+ return keggAccession.startsWith('ko:K');
+ }}
  />
  )),
  },
@@ -149,6 +162,9 @@ const formatData = (rawData: PropertyDataType[]): FormattedData => {
  <MultipleField
  value={attributes.go}
  url="https://www.ebi.ac.uk/ols/search?q="
+ filterValue={(goAccession) => {
+ return goAccession.startsWith('GO:');
+ }}
  />
  )),
  },
@@ -159,7 +175,10 @@ const formatData = (rawData: PropertyDataType[]): FormattedData => {
  (() => (
  <MultipleField
  value={attributes.interpro}
- url="https://www.ebi.ac.uk/interpro/entry/InterPro/'"
+ url="https://www.ebi.ac.uk/interpro/entry/InterPro/"
+ filterValue={(ipsAccession) => {
+ return ipsAccession.startsWith('IPR');
+ }}
  />
  )),
  },

src/components/Genomes/Browser/index.tsx

@@ -6,7 +6,7 @@ import React, {
  useMemo,
 } from 'react';
 import ReactDOMServer from 'react-dom/server';
-import igv from 'igv/dist/igv.esm';
+import igv, { Browser } from 'igv/dist/igv.esm';
 
 import UserContext from 'pages/Login/UserContext';
 import useURLAccession from 'hooks/useURLAccession';
@@ -16,6 +16,7 @@ import {
  annotationTrackCustomisations,
  FORMAT,
 } from 'components/IGV/TrackColourPicker';
+import { handleLocusChanges, updateQueryParams } from 'utils/igvBrowserHelper';
 import GenomeBrowserPopup from './Popup';
 
 const GenomeBrowser: React.FC = () => {
@@ -31,40 +32,11 @@ const GenomeBrowser: React.FC = () => {
  const response = await fetch(virifyGffUrl, { method: 'HEAD' });
  return response.ok;
  }, [virifyGffUrl]);
-
- const resolveQueryParameters = (browser, optionTrackName) => {
- const currentUrl = new URL(window.location.href);
- const featureId = currentUrl.searchParams.get('feature-id');
- const contigId = currentUrl.searchParams.get('contig-id');
- const selectedTrackColor = currentUrl.searchParams.get(
- 'functional-annotation'
- );
- if (featureId) {
- browser.search(featureId);
- }
- if (contigId) {
- browser.search(contigId);
- }
- if (selectedTrackColor) {
- const trackColorBy = {
- label: selectedTrackColor,
- value: selectedTrackColor,
- };
- setTrackColorBys({
- ...trackColorBys,
- [optionTrackName]: trackColorBy,
- });
- }
- };
-
- const updateQueryParams = (key, value) => {
- const currentUrl = new URL(window.location.href);
- currentUrl.searchParams.set(key, value);
- const updatedUrl = currentUrl.toString();
- window.history.replaceState(null, null, updatedUrl);
- };
-
- const handleColorChange = (option, action, trackId) => {
+ const handleColorChange = (
+ option: { value: string },
+ action: { action: string },
+ trackId: string
+ ) => {
  if (action.action === 'select-option') {
  setTrackColorBys({
  ...trackColorBys,
@@ -117,22 +89,28 @@ const GenomeBrowser: React.FC = () => {
  });
 
  if (node === null) return;
- igv.createBrowser(node, options).then((browser) => {
- browser.on('trackclick', (track, trackData) =>
- ReactDOMServer.renderToString(<GenomeBrowserPopup data={trackData} />)
+ igv.createBrowser(node, options).then((browser: Browser) => {
+ browser.on(
+ 'trackclick',
+ (track: any, trackData: { name: string; value: string | number }[]) =>
+ ReactDOMServer.renderToString(
+ <GenomeBrowserPopup data={trackData} />
+ )
+ );
+ handleLocusChanges(
+ browser,
+ setIgvBrowser,
+ (trackColorBy) => {
+ setTrackColorBys({
+ ...trackColorBys,
+ [options.tracks[0].name]: trackColorBy,
+ });
+ },
+ setLoading
  );
- browser.on('locuschange', (referenceFrame) => {
- const { locusSearchString, start, end } = referenceFrame[0];
- updateQueryParams(
- 'feature-id',
- `${locusSearchString}:${start}-${end}`
- );
- });
- setIgvBrowser(browser);
- setLoading(false);
- resolveQueryParameters(browser, options.tracks[0].name);
  });
  },
+ // eslint-disable-next-line react-hooks/exhaustive-deps
  [config.api, accession, hasVirify, virifyGffUrl]
  );
 

src/components/Nav/MainMenu/index.tsx

@@ -41,6 +41,7 @@ const Nav: React.FC = () => {
  const verifyAuthToken = useAuthTokenVerifier();
  useEffect(() => {
  verifyAuthToken();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
  <nav className="vf-navigation vf-navigation--main | vf-cluster vf-u-fullbleed">
@@ -81,6 +82,7 @@ const MobileNav: React.FC = () => {
  const verifyAuthToken = useAuthTokenVerifier();
  useEffect(() => {
  verifyAuthToken();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
  <div>
@@ -114,6 +116,7 @@ const MainMenu: React.FC = () => {
  const verifyAuthToken = useAuthTokenVerifier();
  useEffect(() => {
  verifyAuthToken();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  useLayoutEffect(() => {
  const onScroll = (): void => {

src/components/PersistLogin/index.tsx

@@ -20,6 +20,7 @@ const PersistLogin = () => {
  }
  };
  verifyToken();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
 
  return <Outlet />;

src/components/UI/EMGTable/index.tsx

@@ -13,9 +13,9 @@ import TextInputDebounced from 'components/UI/TextInputDebounced';
 import LoadingOverlay from 'components/UI/LoadingOverlay';
 import { MGnifyDatum, MGnifyResponse } from 'hooks/data/useData';
 import useQueryParamState from 'hooks/queryParamState/useQueryParamState';
-import PaginationButton from './PaginationButton';
 
 import './style.css';
+import PaginationButton from './PaginationButton';
 
 type PaginationRanges = {
  startingPages: number[];
@@ -205,7 +205,6 @@ const EMGTable: React.FC<EMGTableProps> = ({
  };
 
  if (loading && !isStale) return <Loading size="small" />;
-
  return (
  <section data-cy={dataCy}>
  <LoadingOverlay loading={loading && isStale}>