@things-factory/integration-mlflow 9.1.19

package/client/bootstrap.ts

@@ -0,0 +1,41 @@
+import { store } from '@operato/shell'
+
+export default function bootstrap() {
+  /**
+   * MLflow Integration Bootstrap
+   *
+   * Initialize module-specific settings, event listeners, etc.
+   */
+
+  // Example: Register menu items
+  store.dispatch({
+    type: 'ADD_MENU',
+    menu: {
+      category: 'mlflow',
+      name: 'mlflow',
+      icon: 'science',
+      childrens: [
+        {
+          name: 'experiments',
+          path: 'mlflow-experiments',
+          icon: 'lab_research'
+        },
+        {
+          name: 'runs',
+          path: 'mlflow-runs',
+          icon: 'play_circle'
+        },
+        {
+          name: 'models',
+          path: 'mlflow-models',
+          icon: 'model_training'
+        },
+        {
+          name: 'mlflow-ui',
+          path: 'mlflow-viewer',
+          icon: 'dashboard'
+        }
+      ]
+    }
+  })
+}

package/client/index.ts

@@ -0,0 +1,2 @@
+export { default as route } from './route'
+export { default as bootstrap } from './bootstrap'

package/client/pages/mlflow-experiments-page.ts

@@ -0,0 +1,45 @@
+import { css, html, LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+@customElement('mlflow-experiments-page')
+export class MLflowExperimentsPage extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 20px;
+      }
+
+      h2 {
+        margin: 0 0 20px 0;
+      }
+
+      .placeholder {
+        text-align: center;
+        padding: 40px;
+        color: #666;
+      }
+    `
+  ]
+
+  render() {
+    return html`
+      <h2>MLflow Experiments</h2>
+
+      <div class="placeholder">
+        <p>MLflow experiments will be displayed here</p>
+        <p>
+          This page will show:
+          <ul style="text-align: left; display: inline-block;">
+            <li>List of experiments</li>
+            <li>Experiment metadata</li>
+            <li>Associated runs</li>
+            <li>Actions: Create, View, Delete</li>
+          </ul>
+        </p>
+      </div>
+    `
+  }
+}

package/client/pages/mlflow-models-page.ts

@@ -0,0 +1,45 @@
+import { css, html, LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+@customElement('mlflow-models-page')
+export class MLflowModelsPage extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 20px;
+      }
+
+      h2 {
+        margin: 0 0 20px 0;
+      }
+
+      .placeholder {
+        text-align: center;
+        padding: 40px;
+        color: #666;
+      }
+    `
+  ]
+
+  render() {
+    return html`
+      <h2>MLflow Model Registry</h2>
+
+      <div class="placeholder">
+        <p>Registered models will be displayed here</p>
+        <p>
+          This page will show:
+          <ul style="text-align: left; display: inline-block;">
+            <li>Registered models</li>
+            <li>Model versions</li>
+            <li>Current stages (None, Staging, Production)</li>
+            <li>Actions: Register, Transition Stage, Delete</li>
+          </ul>
+        </p>
+      </div>
+    `
+  }
+}

package/client/pages/mlflow-runs-page.ts

@@ -0,0 +1,45 @@
+import { css, html, LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+@customElement('mlflow-runs-page')
+export class MLflowRunsPage extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 20px;
+      }
+
+      h2 {
+        margin: 0 0 20px 0;
+      }
+
+      .placeholder {
+        text-align: center;
+        padding: 40px;
+        color: #666;
+      }
+    `
+  ]
+
+  render() {
+    return html`
+      <h2>MLflow Runs</h2>
+
+      <div class="placeholder">
+        <p>MLflow runs will be displayed here</p>
+        <p>
+          This page will show:
+          <ul style="text-align: left; display: inline-block;">
+            <li>List of experiment runs</li>
+            <li>Run metrics and parameters</li>
+            <li>Run status and duration</li>
+            <li>Artifacts</li>
+          </ul>
+        </p>
+      </div>
+    `
+  }
+}

package/client/pages/mlflow-viewer-page.ts

@@ -0,0 +1,74 @@
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+/**
+ * MLflow UI Viewer
+ *
+ * Embeds MLflow UI in iframe (similar to Label Studio viewer)
+ */
+@customElement('mlflow-viewer-page')
+export class MLflowViewerPage extends LitElement {
+  @property({ type: String }) mlflowUrl: string = process.env.MLFLOW_TRACKING_URI || 'http://localhost:5000'
+
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+      }
+
+      .toolbar {
+        display: flex;
+        align-items: center;
+        padding: 10px 20px;
+        background: #f5f5f5;
+        border-bottom: 1px solid #ddd;
+      }
+
+      .toolbar button {
+        margin-left: 10px;
+        padding: 8px 16px;
+        background: #1976d2;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+
+      .toolbar button:hover {
+        background: #1565c0;
+      }
+
+      .url-display {
+        flex: 1;
+        font-family: monospace;
+        color: #666;
+      }
+    `
+  ]
+
+  private refreshIframe() {
+    const iframe = this.shadowRoot?.querySelector('iframe')
+    if (iframe) {
+      iframe.src = iframe.src
+    }
+  }
+
+  render() {
+    return html`
+      <div class="toolbar">
+        <div class="url-display">${this.mlflowUrl}</div>
+        <button @click=${this.refreshIframe}>Refresh</button>
+      </div>
+
+      <iframe src="${this.mlflowUrl}" title="MLflow UI"></iframe>
+    `
+  }
+}

package/client/route.ts

@@ -0,0 +1,19 @@
+export default function route(page: string) {
+  switch (page) {
+    case 'mlflow-experiments':
+      import('./pages/mlflow-experiments-page')
+      return page
+
+    case 'mlflow-runs':
+      import('./pages/mlflow-runs-page')
+      return page
+
+    case 'mlflow-models':
+      import('./pages/mlflow-models-page')
+      return page
+
+    case 'mlflow-viewer':
+      import('./pages/mlflow-viewer-page')
+      return page
+  }
+}

package/client/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig-base.json",
+  "compilerOptions": {
+    "strict": true,
+    "declaration": true,
+    "module": "esnext",
+    "outDir": "../dist-client",
+    "baseUrl": "./"
+  },
+  "include": ["./**/*"]
+}

package/dist-client/bootstrap.d.ts

@@ -0,0 +1 @@
+export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -0,0 +1,40 @@
+import { store } from '@operato/shell';
+export default function bootstrap() {
+    /**
+     * MLflow Integration Bootstrap
+     *
+     * Initialize module-specific settings, event listeners, etc.
+     */
+    // Example: Register menu items
+    store.dispatch({
+        type: 'ADD_MENU',
+        menu: {
+            category: 'mlflow',
+            name: 'mlflow',
+            icon: 'science',
+            childrens: [
+                {
+                    name: 'experiments',
+                    path: 'mlflow-experiments',
+                    icon: 'lab_research'
+                },
+                {
+                    name: 'runs',
+                    path: 'mlflow-runs',
+                    icon: 'play_circle'
+                },
+                {
+                    name: 'models',
+                    path: 'mlflow-models',
+                    icon: 'model_training'
+                },
+                {
+                    name: 'mlflow-ui',
+                    path: 'mlflow-viewer',
+                    icon: 'dashboard'
+                }
+            ]
+        }
+    });
+}
+//# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAEtC,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B;;;;OAIG;IAEH,+BAA+B;IAC/B,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE;YACJ,QAAQ,EAAE,QAAQ;YAClB,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,SAAS;YACf,SAAS,EAAE;gBACT;oBACE,IAAI,EAAE,aAAa;oBACnB,IAAI,EAAE,oBAAoB;oBAC1B,IAAI,EAAE,cAAc;iBACrB;gBACD;oBACE,IAAI,EAAE,MAAM;oBACZ,IAAI,EAAE,aAAa;oBACnB,IAAI,EAAE,aAAa;iBACpB;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,eAAe;oBACrB,IAAI,EAAE,gBAAgB;iBACvB;gBACD;oBACE,IAAI,EAAE,WAAW;oBACjB,IAAI,EAAE,eAAe;oBACrB,IAAI,EAAE,WAAW;iBAClB;aACF;SACF;KACF,CAAC,CAAA;AACJ,CAAC","sourcesContent":["import { store } from '@operato/shell'\n\nexport default function bootstrap() {\n  /**\n   * MLflow Integration Bootstrap\n   *\n   * Initialize module-specific settings, event listeners, etc.\n   */\n\n  // Example: Register menu items\n  store.dispatch({\n    type: 'ADD_MENU',\n    menu: {\n      category: 'mlflow',\n      name: 'mlflow',\n      icon: 'science',\n      childrens: [\n        {\n          name: 'experiments',\n          path: 'mlflow-experiments',\n          icon: 'lab_research'\n        },\n        {\n          name: 'runs',\n          path: 'mlflow-runs',\n          icon: 'play_circle'\n        },\n        {\n          name: 'models',\n          path: 'mlflow-models',\n          icon: 'model_training'\n        },\n        {\n          name: 'mlflow-ui',\n          path: 'mlflow-viewer',\n          icon: 'dashboard'\n        }\n      ]\n    }\n  })\n}\n"]}

package/dist-client/index.d.ts

@@ -0,0 +1,2 @@
+export { default as route } from './route';
+export { default as bootstrap } from './bootstrap';

package/dist-client/index.js

@@ -0,0 +1,3 @@
+export { default as route } from './route';
+export { default as bootstrap } from './bootstrap';
+//# sourceMappingURL=index.js.map

package/dist-client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA","sourcesContent":["export { default as route } from './route'\nexport { default as bootstrap } from './bootstrap'\n"]}

package/dist-client/pages/mlflow-experiments-page.d.ts

@@ -0,0 +1,5 @@
+import { LitElement } from 'lit';
+export declare class MLflowExperimentsPage extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist-client/pages/mlflow-experiments-page.js

@@ -0,0 +1,48 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+let MLflowExperimentsPage = class MLflowExperimentsPage extends LitElement {
+    static { this.styles = [
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 20px;
+      }
+
+      h2 {
+        margin: 0 0 20px 0;
+      }
+
+      .placeholder {
+        text-align: center;
+        padding: 40px;
+        color: #666;
+      }
+    `
+    ]; }
+    render() {
+        return html `
+      <h2>MLflow Experiments</h2>
+
+      <div class="placeholder">
+        <p>MLflow experiments will be displayed here</p>
+        <p>
+          This page will show:
+          <ul style="text-align: left; display: inline-block;">
+            <li>List of experiments</li>
+            <li>Experiment metadata</li>
+            <li>Associated runs</li>
+            <li>Actions: Create, View, Delete</li>
+          </ul>
+        </p>
+      </div>
+    `;
+    }
+};
+MLflowExperimentsPage = __decorate([
+    customElement('mlflow-experiments-page')
+], MLflowExperimentsPage);
+export { MLflowExperimentsPage };
+//# sourceMappingURL=mlflow-experiments-page.js.map

package/dist-client/pages/mlflow-experiments-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mlflow-experiments-page.js","sourceRoot":"","sources":["../../client/pages/mlflow-experiments-page.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAG1C,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;aAC5C,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBF;KACF,AAnBY,CAmBZ;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAA;IACH,CAAC;;AAvCU,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CAwCjC","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\n@customElement('mlflow-experiments-page')\nexport class MLflowExperimentsPage extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        padding: 20px;\n      }\n\n      h2 {\n        margin: 0 0 20px 0;\n      }\n\n      .placeholder {\n        text-align: center;\n        padding: 40px;\n        color: #666;\n      }\n    `\n  ]\n\n  render() {\n    return html`\n      <h2>MLflow Experiments</h2>\n\n      <div class=\"placeholder\">\n        <p>MLflow experiments will be displayed here</p>\n        <p>\n          This page will show:\n          <ul style=\"text-align: left; display: inline-block;\">\n            <li>List of experiments</li>\n            <li>Experiment metadata</li>\n            <li>Associated runs</li>\n            <li>Actions: Create, View, Delete</li>\n          </ul>\n        </p>\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/pages/mlflow-models-page.d.ts

@@ -0,0 +1,5 @@
+import { LitElement } from 'lit';
+export declare class MLflowModelsPage extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist-client/pages/mlflow-models-page.js

@@ -0,0 +1,48 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+let MLflowModelsPage = class MLflowModelsPage extends LitElement {
+    static { this.styles = [
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 20px;
+      }
+
+      h2 {
+        margin: 0 0 20px 0;
+      }
+
+      .placeholder {
+        text-align: center;
+        padding: 40px;
+        color: #666;
+      }
+    `
+    ]; }
+    render() {
+        return html `
+      <h2>MLflow Model Registry</h2>
+
+      <div class="placeholder">
+        <p>Registered models will be displayed here</p>
+        <p>
+          This page will show:
+          <ul style="text-align: left; display: inline-block;">
+            <li>Registered models</li>
+            <li>Model versions</li>
+            <li>Current stages (None, Staging, Production)</li>
+            <li>Actions: Register, Transition Stage, Delete</li>
+          </ul>
+        </p>
+      </div>
+    `;
+    }
+};
+MLflowModelsPage = __decorate([
+    customElement('mlflow-models-page')
+], MLflowModelsPage);
+export { MLflowModelsPage };
+//# sourceMappingURL=mlflow-models-page.js.map

package/dist-client/pages/mlflow-models-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mlflow-models-page.js","sourceRoot":"","sources":["../../client/pages/mlflow-models-page.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAG1C,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;aACvC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBF;KACF,AAnBY,CAmBZ;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAA;IACH,CAAC;;AAvCU,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAwC5B","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\n@customElement('mlflow-models-page')\nexport class MLflowModelsPage extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        padding: 20px;\n      }\n\n      h2 {\n        margin: 0 0 20px 0;\n      }\n\n      .placeholder {\n        text-align: center;\n        padding: 40px;\n        color: #666;\n      }\n    `\n  ]\n\n  render() {\n    return html`\n      <h2>MLflow Model Registry</h2>\n\n      <div class=\"placeholder\">\n        <p>Registered models will be displayed here</p>\n        <p>\n          This page will show:\n          <ul style=\"text-align: left; display: inline-block;\">\n            <li>Registered models</li>\n            <li>Model versions</li>\n            <li>Current stages (None, Staging, Production)</li>\n            <li>Actions: Register, Transition Stage, Delete</li>\n          </ul>\n        </p>\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/pages/mlflow-runs-page.d.ts

@@ -0,0 +1,5 @@
+import { LitElement } from 'lit';
+export declare class MLflowRunsPage extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist-client/pages/mlflow-runs-page.js

@@ -0,0 +1,48 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+let MLflowRunsPage = class MLflowRunsPage extends LitElement {
+    static { this.styles = [
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 20px;
+      }
+
+      h2 {
+        margin: 0 0 20px 0;
+      }
+
+      .placeholder {
+        text-align: center;
+        padding: 40px;
+        color: #666;
+      }
+    `
+    ]; }
+    render() {
+        return html `
+      <h2>MLflow Runs</h2>
+
+      <div class="placeholder">
+        <p>MLflow runs will be displayed here</p>
+        <p>
+          This page will show:
+          <ul style="text-align: left; display: inline-block;">
+            <li>List of experiment runs</li>
+            <li>Run metrics and parameters</li>
+            <li>Run status and duration</li>
+            <li>Artifacts</li>
+          </ul>
+        </p>
+      </div>
+    `;
+    }
+};
+MLflowRunsPage = __decorate([
+    customElement('mlflow-runs-page')
+], MLflowRunsPage);
+export { MLflowRunsPage };
+//# sourceMappingURL=mlflow-runs-page.js.map

package/dist-client/pages/mlflow-runs-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mlflow-runs-page.js","sourceRoot":"","sources":["../../client/pages/mlflow-runs-page.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAG1C,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;aACrC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBF;KACF,AAnBY,CAmBZ;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAA;IACH,CAAC;;AAvCU,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAwC1B","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\n@customElement('mlflow-runs-page')\nexport class MLflowRunsPage extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        padding: 20px;\n      }\n\n      h2 {\n        margin: 0 0 20px 0;\n      }\n\n      .placeholder {\n        text-align: center;\n        padding: 40px;\n        color: #666;\n      }\n    `\n  ]\n\n  render() {\n    return html`\n      <h2>MLflow Runs</h2>\n\n      <div class=\"placeholder\">\n        <p>MLflow runs will be displayed here</p>\n        <p>\n          This page will show:\n          <ul style=\"text-align: left; display: inline-block;\">\n            <li>List of experiment runs</li>\n            <li>Run metrics and parameters</li>\n            <li>Run status and duration</li>\n            <li>Artifacts</li>\n          </ul>\n        </p>\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/pages/mlflow-viewer-page.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+/**
+ * MLflow UI Viewer
+ *
+ * Embeds MLflow UI in iframe (similar to Label Studio viewer)
+ */
+export declare class MLflowViewerPage extends LitElement {
+    mlflowUrl: string;
+    static styles: import("lit").CSSResult[];
+    private refreshIframe;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist-client/pages/mlflow-viewer-page.js

@@ -0,0 +1,82 @@
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+/**
+ * MLflow UI Viewer
+ *
+ * Embeds MLflow UI in iframe (similar to Label Studio viewer)
+ */
+let MLflowViewerPage = class MLflowViewerPage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.mlflowUrl = process.env.MLFLOW_TRACKING_URI || 'http://localhost:5000';
+    }
+    static { this.styles = [
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+      }
+
+      .toolbar {
+        display: flex;
+        align-items: center;
+        padding: 10px 20px;
+        background: #f5f5f5;
+        border-bottom: 1px solid #ddd;
+      }
+
+      .toolbar button {
+        margin-left: 10px;
+        padding: 8px 16px;
+        background: #1976d2;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+
+      .toolbar button:hover {
+        background: #1565c0;
+      }
+
+      .url-display {
+        flex: 1;
+        font-family: monospace;
+        color: #666;
+      }
+    `
+    ]; }
+    refreshIframe() {
+        const iframe = this.shadowRoot?.querySelector('iframe');
+        if (iframe) {
+            iframe.src = iframe.src;
+        }
+    }
+    render() {
+        return html `
+      <div class="toolbar">
+        <div class="url-display">${this.mlflowUrl}</div>
+        <button @click=${this.refreshIframe}>Refresh</button>
+      </div>
+
+      <iframe src="${this.mlflowUrl}" title="MLflow UI"></iframe>
+    `;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], MLflowViewerPage.prototype, "mlflowUrl", void 0);
+MLflowViewerPage = __decorate([
+    customElement('mlflow-viewer-page')
+], MLflowViewerPage);
+export { MLflowViewerPage };
+//# sourceMappingURL=mlflow-viewer-page.js.map

package/dist-client/pages/mlflow-viewer-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mlflow-viewer-page.js","sourceRoot":"","sources":["../../client/pages/mlflow-viewer-page.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D;;;;GAIG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QACuB,cAAS,GAAW,OAAO,CAAC,GAAG,CAAC,mBAAmB,IAAI,uBAAuB,CAAA;IA+D5G,CAAC;aA7DQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCF;KACF,AA1CY,CA0CZ;IAEO,aAAa;QACnB,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAA;QACvD,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,GAAG,CAAA;QACzB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;mCAEoB,IAAI,CAAC,SAAS;yBACxB,IAAI,CAAC,aAAa;;;qBAGtB,IAAI,CAAC,SAAS;KAC9B,CAAA;IACH,CAAC;;AA9D2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;mDAA+E;AAD/F,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAgE5B","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n/**\n * MLflow UI Viewer\n *\n * Embeds MLflow UI in iframe (similar to Label Studio viewer)\n */\n@customElement('mlflow-viewer-page')\nexport class MLflowViewerPage extends LitElement {\n  @property({ type: String }) mlflowUrl: string = process.env.MLFLOW_TRACKING_URI || 'http://localhost:5000'\n\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      iframe {\n        width: 100%;\n        height: 100%;\n        border: none;\n      }\n\n      .toolbar {\n        display: flex;\n        align-items: center;\n        padding: 10px 20px;\n        background: #f5f5f5;\n        border-bottom: 1px solid #ddd;\n      }\n\n      .toolbar button {\n        margin-left: 10px;\n        padding: 8px 16px;\n        background: #1976d2;\n        color: white;\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n      }\n\n      .toolbar button:hover {\n        background: #1565c0;\n      }\n\n      .url-display {\n        flex: 1;\n        font-family: monospace;\n        color: #666;\n      }\n    `\n  ]\n\n  private refreshIframe() {\n    const iframe = this.shadowRoot?.querySelector('iframe')\n    if (iframe) {\n      iframe.src = iframe.src\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"toolbar\">\n        <div class=\"url-display\">${this.mlflowUrl}</div>\n        <button @click=${this.refreshIframe}>Refresh</button>\n      </div>\n\n      <iframe src=\"${this.mlflowUrl}\" title=\"MLflow UI\"></iframe>\n    `\n  }\n}\n"]}

package/dist-client/route.d.ts

@@ -0,0 +1 @@
+export default function route(page: string): "mlflow-experiments" | "mlflow-runs" | "mlflow-models" | "mlflow-viewer" | undefined;

package/dist-client/route.js

@@ -0,0 +1,17 @@
+export default function route(page) {
+    switch (page) {
+        case 'mlflow-experiments':
+            import('./pages/mlflow-experiments-page');
+            return page;
+        case 'mlflow-runs':
+            import('./pages/mlflow-runs-page');
+            return page;
+        case 'mlflow-models':
+            import('./pages/mlflow-models-page');
+            return page;
+        case 'mlflow-viewer':
+            import('./pages/mlflow-viewer-page');
+            return page;
+    }
+}
+//# sourceMappingURL=route.js.map

package/dist-client/route.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"route.js","sourceRoot":"","sources":["../client/route.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,IAAY;IACxC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,oBAAoB;YACvB,MAAM,CAAC,iCAAiC,CAAC,CAAA;YACzC,OAAO,IAAI,CAAA;QAEb,KAAK,aAAa;YAChB,MAAM,CAAC,0BAA0B,CAAC,CAAA;YAClC,OAAO,IAAI,CAAA;QAEb,KAAK,eAAe;YAClB,MAAM,CAAC,4BAA4B,CAAC,CAAA;YACpC,OAAO,IAAI,CAAA;QAEb,KAAK,eAAe;YAClB,MAAM,CAAC,4BAA4B,CAAC,CAAA;YACpC,OAAO,IAAI,CAAA;IACf,CAAC;AACH,CAAC","sourcesContent":["export default function route(page: string) {\n  switch (page) {\n    case 'mlflow-experiments':\n      import('./pages/mlflow-experiments-page')\n      return page\n\n    case 'mlflow-runs':\n      import('./pages/mlflow-runs-page')\n      return page\n\n    case 'mlflow-models':\n      import('./pages/mlflow-models-page')\n      return page\n\n    case 'mlflow-viewer':\n      import('./pages/mlflow-viewer-page')\n      return page\n  }\n}\n"]}