oneconvergence · himanshusoni92 · Aug 7, 2024 · Aug 7, 2024 · Aug 7, 2024 · Aug 16, 2024
diff --git a/README.rst b/README.rst
@@ -213,3 +213,39 @@ MLflow is currently maintained by the following core members with significant co
 - `Serena Ruan <https://github.com/serena-ruan>`_
 - `Weichen Xu <https://github.com/WeichenXu123>`_
 - `Yuki Watanabe <https://github.com/B-Step62>`_
+
+
+Running MLFLOW Locally
+----------------------
+
+**Steps**
+
+1. **Clone the Git Repository**
+   - Repository URL: [MLFlow GitHub Repo](https://github.com/oneconvergence/mlflow)
+   - Branch: `d3x-v2.15.1`
+
+2. **Navigate to the Project Directory**
+   ``cd mlflow/server/js``
+3. **Install Dependencies**
+    ``yarn install``
+4. **Add Proxy in package.json**
+    ``"proxy": "your.domain.and.port"``
+5. **Login to dkubex and add _oauth2_proxy in cookies**
+    ``_oauth2_proxy: <_oauth2_proxy cookie from dkubex user>``
+6. **Modify FetchUtils.js**
+    - Navigate to ``mlflow/server/js/src/common/utils/FetchUtils.js``
+    - Update the getAjaxUrl function as follows:
+
+.. code-block:: ts
+
+   export const getAjaxUrl = (relativeUrl: any) => {
+     // @ts-expect-error TS(4111): Property 'MLFLOW_USE_ABSOLUTE_AJAX_URLS' comes from an in... Remove this comment to see the full error message
+     if (process.env.MLFLOW_USE_ABSOLUTE_AJAX_URLS === 'true' && !relativeUrl.startsWith('/')) {
+       return '/mlflow/' + relativeUrl;
+     }
+     return '/mlflow/' + relativeUrl;
+   };
+
+7. **Start the Application**
+    ``npm start``
+
diff --git a/mlflow/server/js/package.json b/mlflow/server/js/package.json
@@ -45,6 +45,7 @@
     "dateformat": "3.0.3",
     "file-saver": "1.3.8",
     "font-awesome": "4.7.0",
+    "fuse.js": "^7.0.0",
     "graphql": "^15.5.0",
     "http-proxy-middleware": "^1.0.3",
     "immutable": "3.8.1",

diff --git a/mlflow/server/js/public/lib/artifact-trace-viewer/trace_embedding.html b/mlflow/server/js/public/lib/artifact-trace-viewer/trace_embedding.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2014 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
+
+<head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents.min.js"></script>
+    <script>
+        'use strict';
+
+        function onTraceViewerImportFail() {
+            document.addEventListener('DOMContentLoaded', function () {
+                document.body.textContent =
+                    'tracing/bin/trace_viewer_full.html is missing. ' +
+                    'Run vulcanize_trace_viewer from $TRACE_VIEWER and reload.';
+            });
+        }
+    </script>
+    <link rel="import" href="./trace_viewer_full.html" onerror="onTraceViewerImportFail(event)">
+
+    <style>
+        html,
+        body {
+            box-sizing: border-box;
+            overflow: hidden;
+            margin: 0px;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        #trace-viewer {
+            width: 100%;
+            height: 100%;
+        }
+
+        #trace-viewer:focus {
+            outline: none;
+        }
+    </style>
+    <script>
+        'use strict';
+
+        (function () {
+            let viewer;
+            let name;
+            let model;
+
+            // You can set this to true if you want to hide the WebComponentsV0 polyfill
+            // warning.
+            window.__hideTraceViewerPolyfillWarning = true;
+
+            window.addEventListener("message", event => {
+                const data = event.data || {}
+                console.log(data)
+                name = data.name || 'unknown'
+                onResult(data.data)
+            })
+
+            function onResult(result) {
+                model = new tr.Model();
+                const i = new tr.importer.Import(model);
+                const p = i.importTracesWithProgressDialog([result]);
+                p.then(onModelLoaded, onImportFail);
+            }
+
+            function onModelLoaded() {
+                viewer.model = model;
+                viewer.viewTitle = name;
+            }
+
+            function onImportFail() {
+                const overlay = new tr.ui.b.Overlay();
+                overlay.textContent = `Import '${name}' failed`;
+                overlay.title = 'Import error';
+                overlay.visible = true;
+            }
+
+            document.addEventListener('WebComponentsReady', function () {
+                const container = document.createElement('track-view-container');
+                container.id = 'track_view_container';
+
+                viewer = document.createElement('tr-ui-timeline-view');
+                viewer.track_view_container = container;
+                Polymer.dom(viewer).appendChild(container);
+
+                viewer.id = 'trace-viewer';
+                viewer.globalMode = true;
+                Polymer.dom(document.body).appendChild(viewer);
+
+                if (window.parent) {
+                  window.parent.postMessage({ msg: 'ready' }, '*')
+                }
+            });
+        }());
+    </script>
+</head>
+
+<body>
+</body>
+
+</html>