@things-factory/integration-label-studio 9.1.19

package/dist-client/label-studio-wrapper.js

@@ -0,0 +1,304 @@
+import { __decorate, __metadata } from "tslib";
+/**
+ * Label Studio Wrapper Component for Things Factory
+ *
+ * This component embeds Label Studio within Things Factory using an iframe.
+ * It uses subdomain-based cookie sharing for SSO authentication, eliminating
+ * the need for proxying.
+ *
+ * ## Key Features:
+ * - Direct Label Studio access (no proxy needed)
+ * - Automatic SSO cookie setup via shared domain
+ * - Hidden header for seamless integration
+ * - Floating Action Buttons (FAB) for Reload and Fullscreen
+ *
+ * ## Architecture:
+ * 1. Client calls /label-studio/sso/setup
+ * 2. Backend sets cookie with shared domain (e.g., .nubison.localhost)
+ * 3. Browser → Label Studio (direct, with cookie)
+ *
+ * ## Configuration Requirements:
+ * - Label Studio and Things Factory must use subdomain pattern (e.g., label.example.com, app.example.com)
+ * - Label Studio .env must include:
+ *   - CSRF_TRUSTED_ORIGINS: Include Things Factory frontend domain
+ *   - ALLOWED_HOSTS: Include subdomain patterns
+ *   - JWT_SSO_* settings for SSO authentication
+ * - Things Factory config must include:
+ *   - labelStudio.serverUrl: Label Studio URL
+ *   - labelStudio.cookieDomain: Shared cookie domain (e.g., .example.com)
+ *
+ * ## Usage:
+ * ```html
+ * <label-studio-wrapper></label-studio-wrapper>
+ * ```
+ *
+ * The component automatically:
+ * 1. Calls SSO setup endpoint to establish authentication
+ * 2. Builds iframe URL pointing directly to Label Studio
+ * 3. Adds ?hideHeader=true to hide Label Studio's header
+ * 4. Provides FAB buttons for reload and fullscreen
+ */
+import { css, html, LitElement } from 'lit';
+import { customElement, state, query } from 'lit/decorators.js';
+let LabelStudioWrapper = class LabelStudioWrapper extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.loading = true;
+        this.error = null;
+        this.iframeUrl = '';
+        this.path = '';
+        this.iframeLoaded = false;
+        this.labelStudioUrl = '';
+    }
+    static { this.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      position: relative;
+    }
+
+    .iframe-container {
+      flex: 1;
+      position: relative;
+      overflow: hidden;
+    }
+
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+
+    .fab-container {
+      position: absolute;
+      bottom: 24px;
+      left: 24px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      z-index: 1000;
+    }
+
+    .fab-button {
+      width: 56px;
+      height: 56px;
+      border-radius: 16px;
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      transition: all 0.2s ease;
+    }
+
+    .fab-button:hover {
+      background-color: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+      transform: translateY(-2px);
+    }
+
+    .fab-button md-icon {
+      font-size: 24px;
+    }
+
+    .loading {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      font-size: 18px;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    .error {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      color: var(--md-sys-color-error);
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    md-filled-button {
+      --md-filled-button-container-color: var(--md-sys-color-primary);
+    }
+  `; }
+    async updated(changes) {
+        if (changes.has('path') && this.path) {
+            await this.buildIframeUrl();
+            setTimeout(() => {
+                if (!this.iframeLoaded && !this.error && !this.loading) {
+                    this.error = 'Failed to load Label Studio. The server may be unavailable.';
+                }
+            }, 15000);
+        }
+    }
+    async buildIframeUrl() {
+        try {
+            this.loading = true;
+            this.error = null;
+            // Step 1: Get Label Studio configuration
+            console.log('[Label Studio Wrapper] Fetching Label Studio configuration...');
+            const configResponse = await fetch('/label-studio/sso/config', {
+                method: 'GET',
+                credentials: 'include'
+            });
+            if (!configResponse.ok) {
+                throw new Error(`Failed to fetch Label Studio config: ${configResponse.status}`);
+            }
+            const configData = await configResponse.json();
+            this.labelStudioUrl = configData.labelStudioUrl;
+            if (!this.labelStudioUrl || this.labelStudioUrl === 'not configured') {
+                throw new Error('Label Studio URL is not configured. Please check your settings.');
+            }
+            console.log('[Label Studio Wrapper] Label Studio URL:', this.labelStudioUrl);
+            console.log('[Label Studio Wrapper] Cookie domain:', configData.cookieDomain);
+            // Step 2: Setup SSO token before loading iframe
+            console.log('[Label Studio Wrapper] Setting up SSO token...');
+            const ssoResponse = await fetch('/label-studio/sso/setup', {
+                method: 'GET',
+                credentials: 'include' // Include cookies in request
+            });
+            if (!ssoResponse.ok) {
+                const errorData = await ssoResponse.json().catch(() => ({}));
+                throw new Error(errorData.message || `SSO setup failed: ${ssoResponse.status}`);
+            }
+            const ssoData = await ssoResponse.json();
+            console.log('[Label Studio Wrapper] SSO setup complete:', ssoData.message);
+            // Step 3: Build iframe URL pointing directly to Label Studio
+            // No proxy needed - cookie is shared via domain
+            let url = this.labelStudioUrl + this.path;
+            // Build query parameters
+            const params = new URLSearchParams();
+            // Hide header for seamless iframe embedding
+            params.set('hideHeader', 'true');
+            // Combine URL with parameters
+            const queryString = params.toString();
+            this.iframeUrl = queryString ? `${url}?${queryString}` : url;
+            console.log('[Label Studio Wrapper] iframe URL:', this.iframeUrl);
+        }
+        catch (err) {
+            console.error('[Label Studio Wrapper] Failed to build iframe URL:', err);
+            this.error = `Failed to initialize: ${err.message}`;
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    handleIframeLoad() {
+        console.log('Label Studio iframe loaded successfully');
+        this.iframeLoaded = true;
+        this.loading = false;
+    }
+    handleIframeError() {
+        console.error('Label Studio iframe failed to load');
+        this.error = 'Failed to load Label Studio iframe. Please check the server connection.';
+        this.loading = false;
+    }
+    handleReload() {
+        if (this.iframe) {
+            this.iframe.src = this.iframeUrl;
+        }
+    }
+    handleFullscreen() {
+        if (this.iframe) {
+            if (this.iframe.requestFullscreen) {
+                this.iframe.requestFullscreen();
+            }
+        }
+    }
+    render() {
+        if (this.loading) {
+            return html `
+        <div class="loading">
+          <md-circular-progress indeterminate></md-circular-progress>
+          <span>Loading Label Studio...</span>
+        </div>
+      `;
+        }
+        if (this.error) {
+            return html `
+        <div class="error">
+          <md-icon>error</md-icon>
+          <div>${this.error}</div>
+          <md-filled-button @click=${this.buildIframeUrl}>
+            <md-icon slot="icon">refresh</md-icon>
+            Retry
+          </md-filled-button>
+        </div>
+      `;
+        }
+        return html `
+      <div class="container">
+        <div class="iframe-container">
+          <iframe
+            src=${this.iframeUrl}
+            @load=${this.handleIframeLoad}
+            @error=${this.handleIframeError}
+            allow="fullscreen"
+            allow-same-origin
+            allow-scripts
+            allow-forms
+            allow-popups
+            allow-top-navigation
+          ></iframe>
+        </div>
+        <div class="fab-container">
+          <button class="fab-button" @click=${this.handleReload} title="Reload">
+            <md-icon>refresh</md-icon>
+          </button>
+          <button class="fab-button" @click=${this.handleFullscreen} title="Fullscreen">
+            <md-icon>fullscreen</md-icon>
+          </button>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], LabelStudioWrapper.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], LabelStudioWrapper.prototype, "error", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], LabelStudioWrapper.prototype, "iframeUrl", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], LabelStudioWrapper.prototype, "path", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], LabelStudioWrapper.prototype, "iframeLoaded", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], LabelStudioWrapper.prototype, "labelStudioUrl", void 0);
+__decorate([
+    query('iframe'),
+    __metadata("design:type", HTMLIFrameElement)
+], LabelStudioWrapper.prototype, "iframe", void 0);
+LabelStudioWrapper = __decorate([
+    customElement('label-studio-wrapper')
+], LabelStudioWrapper);
+export { LabelStudioWrapper };
+//# sourceMappingURL=label-studio-wrapper.js.map

package/dist-client/label-studio-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label-studio-wrapper.js","sourceRoot":"","sources":["../client/label-studio-wrapper.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Label Studio Wrapper Component for Things Factory\n *\n * This component embeds Label Studio within Things Factory using an iframe.\n * It uses subdomain-based cookie sharing for SSO authentication, eliminating\n * the need for proxying.\n *\n * ## Key Features:\n * - Direct Label Studio access (no proxy needed)\n * - Automatic SSO cookie setup via shared domain\n * - Hidden header for seamless integration\n * - Floating Action Buttons (FAB) for Reload and Fullscreen\n *\n * ## Architecture:\n * 1. Client calls /label-studio/sso/setup\n * 2. Backend sets cookie with shared domain (e.g., .nubison.localhost)\n * 3. Browser → Label Studio (direct, with cookie)\n *\n * ## Configuration Requirements:\n * - Label Studio and Things Factory must use subdomain pattern (e.g., label.example.com, app.example.com)\n * - Label Studio .env must include:\n *   - CSRF_TRUSTED_ORIGINS: Include Things Factory frontend domain\n *   - ALLOWED_HOSTS: Include subdomain patterns\n *   - JWT_SSO_* settings for SSO authentication\n * - Things Factory config must include:\n *   - labelStudio.serverUrl: Label Studio URL\n *   - labelStudio.cookieDomain: Shared cookie domain (e.g., .example.com)\n *\n * ## Usage:\n * ```html\n * <label-studio-wrapper></label-studio-wrapper>\n * ```\n *\n * The component automatically:\n * 1. Calls SSO setup endpoint to establish authentication\n * 2. Builds iframe URL pointing directly to Label Studio\n * 3. Adds ?hideHeader=true to hide Label Studio's header\n * 4. Provides FAB buttons for reload and fullscreen\n */\nimport { css, html, LitElement } from 'lit'\nimport { customElement, state, query } from 'lit/decorators.js'\n\n@customElement('label-studio-wrapper')\nexport class LabelStudioWrapper extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      overflow: hidden;\n    }\n\n    .container {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      position: relative;\n    }\n\n    .iframe-container {\n      flex: 1;\n      position: relative;\n      overflow: hidden;\n    }\n\n    iframe {\n      width: 100%;\n      height: 100%;\n      border: none;\n    }\n\n    .fab-container {\n      position: absolute;\n      bottom: 24px;\n      left: 24px;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      z-index: 1000;\n    }\n\n    .fab-button {\n      width: 56px;\n      height: 56px;\n      border-radius: 16px;\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n      border: none;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n      transition: all 0.2s ease;\n    }\n\n    .fab-button:hover {\n      background-color: var(--md-sys-color-primary);\n      color: var(--md-sys-color-on-primary);\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);\n      transform: translateY(-2px);\n    }\n\n    .fab-button md-icon {\n      font-size: 24px;\n    }\n\n    .loading {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n      font-size: 18px;\n      color: var(--md-sys-color-on-surface-variant);\n    }\n\n    .error {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n      color: var(--md-sys-color-error);\n      flex-direction: column;\n      gap: 10px;\n    }\n\n    md-filled-button {\n      --md-filled-button-container-color: var(--md-sys-color-primary);\n    }\n  `\n\n  @state() private loading: boolean = true\n  @state() private error: string | null = null\n  @state() private iframeUrl: string = ''\n  @state() private path: string = ''\n  @state() private iframeLoaded: boolean = false\n  @state() private labelStudioUrl: string = ''\n  @query('iframe') private iframe!: HTMLIFrameElement\n\n  async updated(changes: any) {\n    if (changes.has('path') && this.path) {\n      await this.buildIframeUrl()\n\n      setTimeout(() => {\n        if (!this.iframeLoaded && !this.error && !this.loading) {\n          this.error = 'Failed to load Label Studio. The server may be unavailable.'\n        }\n      }, 15000)\n    }\n  }\n\n  async buildIframeUrl() {\n    try {\n      this.loading = true\n      this.error = null\n\n      // Step 1: Get Label Studio configuration\n      console.log('[Label Studio Wrapper] Fetching Label Studio configuration...')\n\n      const configResponse = await fetch('/label-studio/sso/config', {\n        method: 'GET',\n        credentials: 'include'\n      })\n\n      if (!configResponse.ok) {\n        throw new Error(`Failed to fetch Label Studio config: ${configResponse.status}`)\n      }\n\n      const configData = await configResponse.json()\n      this.labelStudioUrl = configData.labelStudioUrl\n\n      if (!this.labelStudioUrl || this.labelStudioUrl === 'not configured') {\n        throw new Error('Label Studio URL is not configured. Please check your settings.')\n      }\n\n      console.log('[Label Studio Wrapper] Label Studio URL:', this.labelStudioUrl)\n      console.log('[Label Studio Wrapper] Cookie domain:', configData.cookieDomain)\n\n      // Step 2: Setup SSO token before loading iframe\n      console.log('[Label Studio Wrapper] Setting up SSO token...')\n\n      const ssoResponse = await fetch('/label-studio/sso/setup', {\n        method: 'GET',\n        credentials: 'include' // Include cookies in request\n      })\n\n      if (!ssoResponse.ok) {\n        const errorData = await ssoResponse.json().catch(() => ({}))\n        throw new Error(errorData.message || `SSO setup failed: ${ssoResponse.status}`)\n      }\n\n      const ssoData = await ssoResponse.json()\n      console.log('[Label Studio Wrapper] SSO setup complete:', ssoData.message)\n\n      // Step 3: Build iframe URL pointing directly to Label Studio\n      // No proxy needed - cookie is shared via domain\n      let url = this.labelStudioUrl + this.path\n\n      // Build query parameters\n      const params = new URLSearchParams()\n\n      // Hide header for seamless iframe embedding\n      params.set('hideHeader', 'true')\n\n      // Combine URL with parameters\n      const queryString = params.toString()\n      this.iframeUrl = queryString ? `${url}?${queryString}` : url\n\n      console.log('[Label Studio Wrapper] iframe URL:', this.iframeUrl)\n    } catch (err: any) {\n      console.error('[Label Studio Wrapper] Failed to build iframe URL:', err)\n      this.error = `Failed to initialize: ${err.message}`\n    } finally {\n      this.loading = false\n    }\n  }\n\n  handleIframeLoad() {\n    console.log('Label Studio iframe loaded successfully')\n    this.iframeLoaded = true\n    this.loading = false\n  }\n\n  handleIframeError() {\n    console.error('Label Studio iframe failed to load')\n    this.error = 'Failed to load Label Studio iframe. Please check the server connection.'\n    this.loading = false\n  }\n\n  handleReload() {\n    if (this.iframe) {\n      this.iframe.src = this.iframeUrl\n    }\n  }\n\n  handleFullscreen() {\n    if (this.iframe) {\n      if (this.iframe.requestFullscreen) {\n        this.iframe.requestFullscreen()\n      }\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return html`\n        <div class=\"loading\">\n          <md-circular-progress indeterminate></md-circular-progress>\n          <span>Loading Label Studio...</span>\n        </div>\n      `\n    }\n\n    if (this.error) {\n      return html`\n        <div class=\"error\">\n          <md-icon>error</md-icon>\n          <div>${this.error}</div>\n          <md-filled-button @click=${this.buildIframeUrl}>\n            <md-icon slot=\"icon\">refresh</md-icon>\n            Retry\n          </md-filled-button>\n        </div>\n      `\n    }\n\n    return html`\n      <div class=\"container\">\n        <div class=\"iframe-container\">\n          <iframe\n            src=${this.iframeUrl}\n            @load=${this.handleIframeLoad}\n            @error=${this.handleIframeError}\n            allow=\"fullscreen\"\n            allow-same-origin\n            allow-scripts\n            allow-forms\n            allow-popups\n            allow-top-navigation\n          ></iframe>\n        </div>\n        <div class=\"fab-container\">\n          <button class=\"fab-button\" @click=${this.handleReload} title=\"Reload\">\n            <md-icon>refresh</md-icon>\n          </button>\n          <button class=\"fab-button\" @click=${this.handleFullscreen} title=\"Fullscreen\">\n            <md-icon>fullscreen</md-icon>\n          </button>\n        </div>\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/route.d.ts

@@ -0,0 +1 @@
+export default function route(page: string): "label-studio-project-create" | "label-studio-project-list" | "label-studio-label" | undefined;

package/dist-client/route.js

@@ -0,0 +1,14 @@
+export default function route(page) {
+    switch (page) {
+        case 'label-studio-project-list':
+            import('./label-studio-project-list.js');
+            return page;
+        case 'label-studio-project-create':
+            import('./label-studio-project-create.js');
+            return page;
+        case 'label-studio-label':
+            import('./label-studio-label-page.js');
+            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,2BAA2B;YAC9B,MAAM,CAAC,gCAAgC,CAAC,CAAA;YACxC,OAAO,IAAI,CAAA;QAEb,KAAK,6BAA6B;YAChC,MAAM,CAAC,kCAAkC,CAAC,CAAA;YAC1C,OAAO,IAAI,CAAA;QAEb,KAAK,oBAAoB;YACvB,MAAM,CAAC,8BAA8B,CAAC,CAAA;YACtC,OAAO,IAAI,CAAA;IACf,CAAC;AACH,CAAC","sourcesContent":["export default function route(page: string) {\n  switch (page) {\n    case 'label-studio-project-list':\n      import('./label-studio-project-list.js')\n      return page\n\n    case 'label-studio-project-create':\n      import('./label-studio-project-create.js')\n      return page\n\n    case 'label-studio-label':\n      import('./label-studio-label-page.js')\n      return page\n  }\n}\n"]}