Fix: Kedro-Viz doesn't work when hosted via a URL subpath (#1621)

* Fix: Kedro-Viz doesn't work when hosted via a URL subpath * Pathname updated for experiment-tracking Also pathRoot moved to util to break circular dependency * graphql endpoint url fix * Lint error fix * deploy-viz-metadata api fix * Release note added * Update RELEASE.md Co-authored-by: Tynan DeBold <thdebold@gmail.com> --------- Co-authored-by: Tynan DeBold <thdebold@gmail.com>
kedro-org · Nov 6, 2023 · c59df4d · c59df4d
1 parent 6c063bf
commit c59df4d
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 39 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -12,6 +12,7 @@ Please follow the established format:
 
 - Fix dataset factory patterns in Experiment Tracking. (#1588)
 - Improved feedback for copy to clipboard feature. (#1614)
+- Ensure Kedro-Viz works when hosted on a URL subpath. (#1621)
 
 # Release 6.6.1
 

diff --git a/package/kedro_viz/api/graphql/router.py b/package/kedro_viz/api/graphql/router.py
@@ -10,3 +10,7 @@
 graphql_app: GraphQL = GraphQL(schema, graphiql=False)
 router.add_route("/graphql", graphql_app)
 router.add_websocket_route("/graphql", graphql_app)
+
+# {subpath:path} is to handle urls with subpath e.g. demo.kedro.org/web
+router.add_route("/{subpath:path}/graphql", graphql_app)
+router.add_websocket_route("/{subpath:path}/graphql", graphql_app)
diff --git a/src/apollo/config.js b/src/apollo/config.js
@@ -6,16 +6,11 @@ import {
   split,
 } from '@apollo/client';
 import { getMainDefinition } from '@apollo/client/utilities';
-import { replaceMatches } from '../utils';
-
-const { pathname } = window.location;
-const sanitizedPathname = replaceMatches(pathname, {
-  'experiment-tracking': '',
-});
+import { sanitizedPathname } from '../utils';
 
 const httpLink = createHttpLink({
   // our graphql endpoint, normally here: http://localhost:4141/graphql
-  uri: `${sanitizedPathname}graphql`,
+  uri: `${sanitizedPathname()}graphql`,
   fetch,
 });
 

diff --git a/src/components/global-toolbar/global-toolbar.js b/src/components/global-toolbar/global-toolbar.js
@@ -6,7 +6,7 @@ import {
   toggleShareableUrlModal,
   toggleTheme,
 } from '../../actions';
-import { isRunningLocally, replaceMatches } from '../../utils';
+import { isRunningLocally, sanitizedPathname } from '../../utils';
 
 import DownloadIcon from '../icons/download';
 import ExperimentsIcon from '../icons/experiments';
@@ -30,11 +30,6 @@ export const GlobalToolbar = ({
   onToggleTheme,
   theme,
 }) => {
-  const { pathname } = window.location;
-  const sanitizedPathname = replaceMatches(pathname, {
-    'experiment-tracking': '',
-  });
-
   return (
     <>
       <div className="pipeline-global-toolbar">
@@ -46,7 +41,7 @@ export const GlobalToolbar = ({
             disabled={false}
             icon={LogoIcon}
           />
-          <NavLink exact to={{ pathname: sanitizedPathname }}>
+          <NavLink exact to={{ pathname: sanitizedPathname() }}>
             <IconButton
               ariaLabel={'View your pipeline'}
               dataTest={'View your pipeline'}
@@ -63,7 +58,7 @@ export const GlobalToolbar = ({
             <NavLink
               exact
               id="experiment-tracking-nav-button"
-              to={{ pathname: `${sanitizedPathname}experiment-tracking` }}
+              to={{ pathname: `${sanitizedPathname()}experiment-tracking` }}
             >
               <IconButton
                 ariaLabel={'View your experiments'}

diff --git a/src/components/shareable-url-modal/shareable-url-metadata.js b/src/components/shareable-url-modal/shareable-url-metadata.js
@@ -1,17 +1,21 @@
 import { useEffect, useState } from 'react';
+import { sanitizedPathname } from '../../utils';
 
 const ShareableUrlMetadata = () => {
   const [metadata, setMetadata] = useState(null);
 
   useEffect(() => {
     async function fetchData() {
       try {
-        const request = await fetch('/api/deploy-viz-metadata', {
-          headers: {
-            'Content-Type': 'application/json',
-            Accept: 'application/json',
-          },
-        });
+        const request = await fetch(
+          `${sanitizedPathname()}api/deploy-viz-metadata`,
+          {
+            headers: {
+              'Content-Type': 'application/json',
+              Accept: 'application/json',
+            },
+          }
+        );
         const response = await request.json();
 
         if (request.ok) {

diff --git a/src/components/wrapper/wrapper.js b/src/components/wrapper/wrapper.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import classnames from 'classnames';
-import { isRunningLocally, replaceMatches } from '../../utils';
+import { isRunningLocally, sanitizedPathname } from '../../utils';
 import { useApolloQuery } from '../../apollo/utils';
 import { client } from '../../apollo/config';
 import { GraphQLProvider } from '../provider/provider';
@@ -21,11 +21,6 @@ import './wrapper.scss';
  * Main app container. Handles showing/hiding the sidebar nav, and theme classes.
  */
 export const Wrapper = ({ displayGlobalToolbar, theme }) => {
-  const { pathname } = window.location;
-  const sanitizedPathname = replaceMatches(pathname, {
-    'experiment-tracking': '',
-  });
-
   const { data: versionData } = useApolloQuery(GET_VERSIONS, {
     client,
     skip: !displayGlobalToolbar || !isRunningLocally(),
@@ -63,11 +58,11 @@ export const Wrapper = ({ displayGlobalToolbar, theme }) => {
               />
             )}
             <Switch>
-              <Route exact path={sanitizedPathname}>
+              <Route exact path={sanitizedPathname()}>
                 <FlowChartWrapper />
                 <FeatureHints />
               </Route>
-              <Route path={`${sanitizedPathname}experiment-tracking`}>
+              <Route path={`${sanitizedPathname()}experiment-tracking`}>
                 <ExperimentWrapper />
               </Route>
             </Switch>

diff --git a/src/config.js b/src/config.js
@@ -1,4 +1,4 @@
-export const pathRoot = './api';
+import { sanitizedPathname } from './utils';
 
 export const localStorageName = 'KedroViz';
 export const localStorageFlowchartLink = 'KedroViz-link-to-flowchart';
@@ -123,19 +123,20 @@ export const params = {
 };
 
 const activePipeline = `${params.pipeline}=:pipelineId`;
+const pathname = sanitizedPathname();
 
 export const routes = {
   flowchart: {
-    main: '/',
-    focusedNode: `/?${activePipeline}&${params.focused}=:id`,
-    selectedNode: `/?${activePipeline}&${params.selected}=:id`,
-    selectedName: `/?${activePipeline}&${params.selectedName}=:fullName`,
-    selectedPipeline: `/?${activePipeline}`,
+    main: pathname,
+    focusedNode: `${pathname}?${activePipeline}&${params.focused}=:id`,
+    selectedNode: `${pathname}?${activePipeline}&${params.selected}=:id`,
+    selectedName: `${pathname}?${activePipeline}&${params.selectedName}=:fullName`,
+    selectedPipeline: `${pathname}?${activePipeline}`,
   },
   experimentTracking: {
-    main: '/experiment-tracking',
-    selectedView: `/experiment-tracking?${params.view}=:view`,
-    selectedRuns: `/experiment-tracking?${params.run}=:ids&${params.view}=:view&${params.comparisonMode}=:isComparison`,
+    main: `${pathname}experiment-tracking`,
+    selectedView: `${pathname}experiment-tracking?${params.view}=:view`,
+    selectedRuns: `${pathname}experiment-tracking?${params.run}=:ids&${params.view}=:view&${params.comparisonMode}=:isComparison`,
   },
 };
 

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -1,5 +1,5 @@
 //--- Useful JS utility functions ---//
-import { pathRoot } from '../config';
+const pathRoot = './api';
 
 /**
  * Loop through an array and output to an object
@@ -198,3 +198,19 @@ export const isRunningLocally = () => {
     return true;
   }
 };
+
+/**
+ * Sanitized pathname with experiment-tracking string and check if path containing trailing slash
+ * @returns {string} Sanitized pathname
+ */
+export const sanitizedPathname = () => {
+  const { pathname } = window.location;
+  const sanitizedPathname = replaceMatches(pathname, {
+    'experiment-tracking': '',
+  });
+  const pathnameWithTrailingSlash = sanitizedPathname.endsWith('/')
+    ? sanitizedPathname
+    : `${sanitizedPathname}/`; // the `pathname` will have a trailing slash if it didn't initially
+
+  return pathnameWithTrailingSlash;
+};