G-Research · jgiannuzzi · Dec 15, 2023 · Dec 14, 2023
diff --git a/src/craco.config.js b/src/craco.config.js
@@ -12,7 +12,7 @@ const isDevserverWebsocketRequest = (request) =>
   (request.headers.upgrade === 'websocket' || request.headers['sec-websocket-version']);
 
 function mayProxy(pathname) {
-  const publicPrefixPrefix = '/static-files/';
+  const publicPrefixPrefix = '/static/mlflow/';
   if (pathname.startsWith(publicPrefixPrefix)) {
     const maybePublicPath = path.resolve('public', pathname.substring(publicPrefixPrefix.length));
     return !fs.existsSync(maybePublicPath);
@@ -72,7 +72,7 @@ function configureIframeCSSPublicPaths(config, env) {
           cssRule.use
             ?.filter((loaderConfig) => loaderConfig?.loader.match(/[\/\\]mini-css-extract-plugin[\/\\]/))
             .forEach((loaderConfig) => {
-              loaderConfig.options = { publicPath: '../../' };
+              loaderConfig.options = { publicPath: '/static/mlflow/' };
               cssRuleFixed = true;
             });
         });
@@ -292,7 +292,7 @@ module.exports = function () {
     },
     webpack: {
       configure: (webpackConfig, { env }) => {
-        webpackConfig.output.publicPath = 'static-files/';
+        webpackConfig.output.publicPath = '/static/mlflow/';
         webpackConfig = i18nOverrides(webpackConfig);
         webpackConfig = configureIframeCSSPublicPaths(webpackConfig, env);
         webpackConfig = enableOptionalTypescript(webpackConfig);

diff --git a/src/package.json b/src/package.json
@@ -5,7 +5,7 @@
     "start": "craco start",
     "start:dev-proxy-fs": "APP_NAME=feature-store yarn start",
     "start:dev-proxy": "APP_NAME=mlflow MLFLOW_MFE_DEV=true yarn start",
-    "build": "craco --max_old_space_size=8192 build",
+    "build": "GENERATE_SOURCEMAP=false craco --max_old_space_size=8192 build",
     "build:analyze": "yarn build:webpack --analyze",
     "build:webpack": "NODE_OPTIONS=${NODE_OPTIONS:-'--max_old_space_size=12288'} databricks-webpack build",
     "build:fs": "NODE_OPTIONS=${NODE_OPTIONS:-'--max_old_space_size=12288'} scripts/build.sh fs",
@@ -199,7 +199,7 @@
     "rc-virtual-list@^3.0.1": "patch:rc-virtual-list@npm%3A3.2.0#yarn/patches/rc-virtual-list-npm-3.2.0-5efaefc12e.patch"
   },
   "//": "homepage is hard to configure without resorting to env variables and doesn't play nicely with other webpack settings. This field should be removed.",
-  "homepage": "static-files",
+  "homepage": "/static/mlflow/",
   "browserslist": [
     "defaults"
   ],

diff --git a/src/public/index.html b/src/public/index.html
@@ -3,14 +3,18 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-    <link rel="shortcut icon" href="./static-files/favicon.ico" />
+    <link rel="shortcut icon" href="/static/mlflow/favicon.ico" />
     <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="./static-files/manifest.json" />
-    <title>MLflow</title>
+    <link rel="manifest" href="/static/mlflow/manifest.json" />
+    <title>FastTrackML (classic)</title>
+    <script>
+      const found = window.location.pathname.match(/^(\/ns\/[^/]+\/)mlflow/);
+      window.API_BASE_PATH = found ? found[1] : '/';
+    </script>
   </head>
 
   <body>

diff --git a/src/src/common/components/MlflowHeader.tsx b/src/src/common/components/MlflowHeader.tsx
@@ -1,6 +1,6 @@
 import ExperimentTrackingRoutes from '../../experiment-tracking/routes';
 import { Link, Location, matchPath, useLocation } from '../utils/RoutingUtils';
-import logo from '../../common/static/home-logo.png';
+import logo from '../../common/static/home-logo.svg';
 import { ModelRegistryRoutes } from '../../model-registry/routes';
 import { HomePageDocsUrl, Version } from '../constants';
 

diff --git a/src/src/common/constants.tsx b/src/src/common/constants.tsx
@@ -43,7 +43,7 @@ export const LoggingRunsDocUrl = `${DOCS_ROOT}/tracking.html#logging-data-to-run
 
 export const onboarding = 'onboarding';
 
-export const SupportPageUrl = 'https://github.com/mlflow/mlflow/issues';
+export const SupportPageUrl = 'https://github.com/G-Research/fasttrackml/issues';
 
 export const ModelSignatureUrl = `${DOCS_ROOT}/models.html#model-signature`;
 

diff --git a/src/src/common/static/home-logo.png b/src/src/common/static/home-logo.png
diff --git a/src/src/common/static/home-logo.svg b/src/src/common/static/home-logo.svg
diff --git a/src/src/common/utils/ArtifactUtils.ts b/src/src/common/utils/ArtifactUtils.ts
@@ -6,7 +6,7 @@
  */
 
 import { ErrorWrapper } from './ErrorWrapper';
-import { getDefaultHeaders, HTTPMethods } from './FetchUtils';
+import { getBasePath, getDefaultHeaders, HTTPMethods } from './FetchUtils';
 
 /**
  * Async function to fetch and return the specified artifact blob from response.
@@ -111,7 +111,7 @@ export function getArtifactBytesContent(artifactLocation: any) {
 }
 
 export const getArtifactLocationUrl = (path: string, runUuid: string) => {
-  const artifactEndpointPath = 'get-artifact';
+  const artifactEndpointPath = `${getBasePath()}ajax-api/2.0/mlflow/artifacts/get`;
   return `${artifactEndpointPath}?path=${encodeURIComponent(path)}&run_uuid=${encodeURIComponent(
     runUuid,
   )}`;

diff --git a/src/src/common/utils/FeatureUtils.ts b/src/src/common/utils/FeatureUtils.ts
@@ -9,11 +9,11 @@ export const shouldDisableLegacyRunCompareCharts = () => false;
 /**
  * UI feature preview: displays data lineage (datasets used) in experiment runs
  */
-export const shouldEnableExperimentDatasetTracking = () => true;
+export const shouldEnableExperimentDatasetTracking = () => false;
 /**
  * UI feature preview: enables artifact-based ML experiment output data analysis, used for evaluating LLM prediction data
  */
-export const shouldEnableArtifactBasedEvaluation = () => true;
+export const shouldEnableArtifactBasedEvaluation = () => false;
 
 export const shouldEnableDatasetsDropdown = () => false;
 
@@ -22,7 +22,7 @@ export const shouldEnableDeepLearningUI = () => false;
 /**
  * UI feature preview: enables prompt lab
  */
-export const shouldEnablePromptLab = () => true;
+export const shouldEnablePromptLab = () => false;
 
 export const shouldUsePathRouting = () => false;
 

diff --git a/src/src/common/utils/FetchUtils.ts b/src/src/common/utils/FetchUtils.ts
@@ -11,6 +11,23 @@ import yaml from 'js-yaml';
 import _ from 'lodash';
 import { ErrorWrapper } from './ErrorWrapper';
 
+interface GlobalScope extends Window {
+  API_BASE_PATH?: string;
+}
+
+let globalScope: GlobalScope;
+
+try {
+  globalScope = window;
+} catch (ex) {
+  /* eslint-disable-next-line no-restricted-globals */
+  globalScope = self;
+}
+
+export const getBasePath = () => {
+  return `${globalScope.API_BASE_PATH}`;
+};
+
 export const HTTPMethods = {
   GET: 'GET',
   POST: 'POST',
@@ -56,7 +73,7 @@ export const getAjaxUrl = (relativeUrl: any) => {
   if (process.env.USE_ABSOLUTE_AJAX_URLS === 'true' && !relativeUrl.startsWith('/')) {
     return '/' + relativeUrl;
   }
-  return relativeUrl;
+  return getBasePath() + relativeUrl;
 };
 
 // return response json by default, if response is not parsable to json,

diff --git a/src/src/experiment-tracking/components/App.css b/src/src/experiment-tracking/components/App.css
@@ -36,16 +36,16 @@ div.mlflow-logo {
 }
 
 img.mlflow-logo {
-  height: 40px;
+  height: 100px;
   margin-left: 24px;
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin-top: -20px;
+  margin-bottom: -20px;
 }
 
 span.mlflow-version {
-  font-size: 12px;
+  font-size: 14px;
   margin-left: 5px;
-  margin-bottom: 13px;
+  margin-bottom: 16px;
 }
 
 div.github {

diff --git a/src/src/experiment-tracking/components/App.tsx b/src/src/experiment-tracking/components/App.tsx
@@ -18,8 +18,9 @@ import {
 } from '../../common/utils/RoutingUtils';
 
 import AppErrorBoundary from '../../common/components/error-boundaries/AppErrorBoundary';
-import { HomePageDocsUrl, Version } from '../../common/constants';
-import logo from '../../common/static/home-logo.png';
+import { HomePageDocsUrl } from '../../common/constants';
+import { fetchEndpoint } from '../../common/utils/FetchUtils';
+import logo from '../../common/static/home-logo.svg';
 import ErrorModal from '../../experiment-tracking/components/modals/ErrorModal';
 import { CompareModelVersionsPage } from '../../model-registry/components/CompareModelVersionsPage';
 import { ModelListPage } from '../../model-registry/components/ModelListPage';
@@ -55,6 +56,20 @@ const classNames = {
 const InteractionTracker = ({ children }: any) => children;
 
 class App extends Component {
+  state = {
+    version: 'unknown',
+  };
+
+  componentDidMount() {
+    fetch('/version').then((response) => {
+      response.text().then((version) => {
+        this.setState({
+          version: version,
+        });
+      });
+    });
+  }
+
   render() {
     const marginRight = 24;
     return (
@@ -74,7 +89,7 @@ class App extends Component {
                   <LinkV5 to={ExperimentTrackingRoutes.rootRoute} className='App-mlflow'>
                     <img className='mlflow-logo' alt='MLflow' src={logo} />
                   </LinkV5>
-                  <span className={'mlflow-version'}>{Version}</span>
+                  <span className={'mlflow-version'}>{this.state.version}</span>
                 </div>
                 <div className='header-route-links'>
                   <NavLinkV5
@@ -89,20 +104,14 @@ class App extends Component {
                       <span>Experiments</span>
                     </div>
                   </NavLinkV5>
-                  <NavLinkV5
-                    strict
-                    to={ModelRegistryRoutes.modelListPageRoute}
-                    css={{ marginRight }}
-                    activeStyle={classNames.activeNavLink}
-                    className='header-nav-link header-nav-link-models'
-                  >
-                    <div className='models'>
-                      <span>Models</span>
-                    </div>
-                  </NavLinkV5>
                 </div>
                 <div className='header-links'>
-                  <a href={'https://github.com/mlflow/mlflow'} css={{ marginRight }}>
+                  <a href={'../'} css={{ marginRight }}>
+                    <div className='github'>
+                      <span>Switch UI</span>
+                    </div>
+                  </a>
+                  <a href={'https://github.com/G-Research/fasttrackml'} css={{ marginRight }}>
                     <div className='github'>
                       <span>GitHub</span>
                     </div>

diff --git a/src/src/experiment-tracking/components/artifact-view-components/ShowArtifactPdfView.tsx b/src/src/experiment-tracking/components/artifact-view-components/ShowArtifactPdfView.tsx
@@ -19,7 +19,7 @@ import { ErrorWrapper } from '../../../common/utils/ErrorWrapper';
 
 // See: https://github.com/wojtekmaj/react-pdf/blob/master/README.md#enable-pdfjs-worker for how
 // workerSrc is supposed to be specified.
-pdfjs.GlobalWorkerOptions.workerSrc = `./static-files/pdf.worker.js`;
+pdfjs.GlobalWorkerOptions.workerSrc = `/static/mlflow/pdf.worker.js`;
 
 type OwnProps = {
   runUuid: string;

diff --git a/src/src/experiment-tracking/components/experiment-page/ExperimentView.tsx b/src/src/experiment-tracking/components/experiment-page/ExperimentView.tsx
@@ -13,13 +13,8 @@ import { useExperimentIds } from './hooks/useExperimentIds';
 import { useExperiments } from './hooks/useExperiments';
 import { useFetchExperiments } from './hooks/useFetchExperiments';
 import { useElementHeight } from '../../../common/utils/useElementHeight';
-import { useAsyncDispatch } from './hooks/useAsyncDispatch';
-import { searchDatasetsApi } from '../../actions';
-import Utils from '../../../common/utils/Utils';
 
 export const ExperimentView = () => {
-  const dispatch = useAsyncDispatch();
-
   const experimentIds = useExperimentIds();
   const experiments = useExperiments(experimentIds);
 
@@ -35,13 +30,6 @@ export const ExperimentView = () => {
     fetchExperiments(experimentIds);
   }, [fetchExperiments, experimentIds]);
 
-  useEffect(() => {
-    const requestAction = searchDatasetsApi(experimentIds);
-    dispatch(requestAction).catch((e) => {
-      Utils.logErrorAndNotifyUser(e);
-    });
-  }, [dispatch, experimentIds]);
-
   const isComparingExperiments = experimentIds.length > 1;
 
   if (requestError && requestError.getErrorCode() === ErrorCodes.PERMISSION_DENIED) {

diff --git a/src/src/setupProxy.js b/src/src/setupProxy.js
@@ -14,6 +14,12 @@ module.exports = function (app) {
       changeOrigin: true,
     }),
   );
+  app.use(
+    createProxyMiddleware('/version', {
+      target: proxyTarget,
+      changeOrigin: true,
+    }),
+  );
   app.use(
     createProxyMiddleware('/get-artifact', {
       target: proxyStaticTarget,