Pathfinder iframe integration for testing on devsites

packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/Pathfinder.scss

@@ -0,0 +1,17 @@
+@import '@veupathdb/web-common/lib/styles/collapsed-header-mixins.scss';
+
+body.vpdb-Body .vpdb-RootContainer__pathfinder {
+  @include collapsed-header-page-layout;
+
+  @media screen and (min-width: $hamburger-width + 1) {
+    grid-template-rows: $collapsed-header-height auto auto 1fr auto;
+  }
+
+  .vpdb-Main {
+    margin: 0;
+    padding: 0;
+    iframe {
+      border: none;
+    }
+  }
+}

packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/Pathfinder.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import './Pathfinder.scss';
+
+interface Props {
+  src: string;
+}
+
+export default function Pathfinder(props: Props) {
+  return (
+    <iframe
+      title="PathFinder"
+      src={props.src}
+      width="100%"
+      height="100%"
+      allowFullScreen
+    ></iframe>
+  );
+}

packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/controllers/PathfinderController.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { RootState } from '@veupathdb/wdk-client/lib/Core/State/Types';
+import { useSetDocumentTitle } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils';
+
+import { projectId } from '../../config';
+import Pathfinder from '../Pathfinder';
+
+export const PathfinderController = () => {
+  usePathfinderDocumentTitle();
+
+  const siteId = (projectId ?? 'veupathdb').toLowerCase();
+  const src = `/pathfinder-app?embedded=true&siteId=${siteId}`;
+
+  return <Pathfinder src={src} />;
+};
+
+const usePathfinderDocumentTitle = () => {
+  const projectDisplayName = useSelector(
+    (state: RootState) =>
+      state.globalData.config && state.globalData.config.displayName
+  );
+
+  const title = projectDisplayName
+    ? `${projectDisplayName} :: PathFinder`
+    : 'PathFinder';
+
+  useSetDocumentTitle(title);
+};

packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/homepage/VEuPathDBHomePage.tsx

@@ -121,7 +121,9 @@ const VEuPathDBHomePageViewStandard: FunctionComponent<Props> = (props) => {
 
   const location = useLocation();
   const shouldHideOrgPrefsSubheader =
-    location.pathname.includes('workspace/analyses');
+    location.pathname.includes('workspace/analyses') ||
+    location.pathname.startsWith('/jbrowse') ||
+    location.pathname.startsWith('/pathfinder');
 
   useEffect(() => {
     if (isHomePage && props.displayName) {

packages/sites/genomics-site/webapp/wdkCustomization/js/client/routes.jsx

@@ -8,6 +8,7 @@ import SiteSearchController from '@veupathdb/web-common/lib/controllers/SiteSear
 import FastaConfigController from './components/controllers/FastaConfigController';
 import QueryGridController from './components/controllers/QueryGridController';
 import { JBrowseController } from './components/controllers/JBrowseController';
+import { PathfinderController } from './components/controllers/PathfinderController';
 import { PlasmoApController } from './components/controllers/PlasmoApController';
 
 import { useUserDatasetsWorkspace } from '@veupathdb/web-common/lib/config';
@@ -163,15 +164,17 @@ function DownloadsRouteComponent() {
  * Wrap Ebrc Routes
  */
 export const wrapRoutes = (ebrcRoutes) => [
-
-  // Allow guests to access dataset record pages for SEO and public visibility                                                                                             
-  {                                                                                                                                                                        
-    path: '/record/dataset/:primaryKey+',                                                                                                                                  
-    requiresLogin: false,                                                                                                                                                  
-    component: (props) => (                                                                                                                                                
-      <RecordController recordClass="dataset" primaryKey={props.match.params.primaryKey} />
-    ),                                                                                                                                                                     
-  },      
+  // Allow guests to access dataset record pages for SEO and public visibility
+  {
+    path: '/record/dataset/:primaryKey+',
+    requiresLogin: false,
+    component: (props) => (
+      <RecordController
+        recordClass="dataset"
+        primaryKey={props.match.params.primaryKey}
+      />
+    ),
+  },
 
   // Allow guests to access All Datasets and All Organisms for SEO and public visibility
   {
@@ -227,6 +230,12 @@ export const wrapRoutes = (ebrcRoutes) => [
     rootClassNameModifier: 'jbrowse',
   },
 
+  {
+    path: '/pathfinder',
+    component: PathfinderController,
+    rootClassNameModifier: 'pathfinder',
+  },
+
   {
     path: '/search',
     component: () => (