@things-factory/labeling 10.0.0-zeta.7 → 10.0.0

package/dist-client/index.d.ts

@@ -0,0 +1,3 @@
+export * from './pages/labeling-workflow-list.js';
+export * from './pages/labeling-workflow-builder.js';
+export { default as route } from './route.js';

package/dist-client/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.route = void 0;
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./pages/labeling-workflow-list.js"), exports);
+tslib_1.__exportStar(require("./pages/labeling-workflow-builder.js"), exports);
+var route_js_1 = require("./route.js");
+Object.defineProperty(exports, "route", { enumerable: true, get: function () { return tslib_1.__importDefault(route_js_1).default; } });
+//# 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,4EAAiD;AACjD,+EAAoD;AAEpD,uCAA6C;AAApC,0HAAA,OAAO,OAAS","sourcesContent":["export * from './pages/labeling-workflow-list.js'\nexport * from './pages/labeling-workflow-builder.js'\n\nexport { default as route } from './route.js'\n"]}

package/dist-client/pages/labeling-workflow-builder.d.ts

@@ -0,0 +1,26 @@
+import { PageView } from '@operato/shell';
+/**
+ * Workflow Builder Page
+ *
+ * Generic workflow builder UI for creating and editing labeling workflows
+ */
+export declare class LabelingWorkflowBuilderPage extends PageView {
+    static styles: import("lit").CSSResult[];
+    workflowId?: string;
+    workflow: any;
+    selectedStepIndex: number;
+    loading: boolean;
+    error: string;
+    firstUpdated(): Promise<void>;
+    loadWorkflow(): Promise<void>;
+    saveWorkflow(): Promise<void>;
+    addStep(): void;
+    removeStep(index: number): void;
+    moveStepUp(index: number): void;
+    moveStepDown(index: number): void;
+    selectStep(index: number): void;
+    updateStep(index: number, field: string, value: any): void;
+    updateWorkflow(field: string, value: any): void;
+    renderStepEditor(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist-client/pages/labeling-workflow-builder.js

@@ -0,0 +1,636 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelingWorkflowBuilderPage = void 0;
+const tslib_1 = require("tslib");
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const shell_1 = require("@operato/shell");
+const graphql_1 = require("@operato/graphql");
+const graphql_tag_1 = tslib_1.__importDefault(require("graphql-tag"));
+/**
+ * Workflow Builder Page
+ *
+ * Generic workflow builder UI for creating and editing labeling workflows
+ */
+let LabelingWorkflowBuilderPage = class LabelingWorkflowBuilderPage extends shell_1.PageView {
+    constructor() {
+        super(...arguments);
+        this.workflow = {
+            name: '',
+            description: '',
+            projectId: null,
+            triggerType: 'manual',
+            triggerConfig: '',
+            steps: [],
+            autoStart: false
+        };
+        this.selectedStepIndex = -1;
+        this.loading = false;
+        this.error = '';
+    }
+    static { this.styles = [
+        (0, lit_1.css) `
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        background-color: var(--md-sys-color-surface);
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px;
+        background-color: var(--md-sys-color-surface-variant);
+        border-bottom: 1px solid var(--md-sys-color-outline);
+      }
+
+      .header h1 {
+        margin: 0;
+        font-size: 24px;
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .header-actions {
+        display: flex;
+        gap: 10px;
+      }
+
+      .content {
+        display: flex;
+        flex: 1;
+        overflow: hidden;
+      }
+
+      .sidebar {
+        width: 300px;
+        border-right: 1px solid var(--md-sys-color-outline);
+        overflow-y: auto;
+        padding: 20px;
+      }
+
+      .main-area {
+        flex: 1;
+        overflow-y: auto;
+        padding: 20px;
+      }
+
+      .form-group {
+        margin-bottom: 20px;
+      }
+
+      .form-group label {
+        display: block;
+        margin-bottom: 8px;
+        font-weight: 500;
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .form-group input,
+      .form-group textarea,
+      .form-group select {
+        width: 100%;
+        padding: 10px;
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: 4px;
+        font-size: 14px;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .form-group textarea {
+        min-height: 80px;
+        resize: vertical;
+      }
+
+      button {
+        padding: 10px 20px;
+        background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 14px;
+      }
+
+      button:hover {
+        opacity: 0.9;
+      }
+
+      button.secondary {
+        background-color: var(--md-sys-color-secondary);
+        color: var(--md-sys-color-on-secondary);
+      }
+
+      .steps-container {
+        margin-top: 20px;
+      }
+
+      .steps-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 15px;
+      }
+
+      .steps-header h2 {
+        margin: 0;
+        font-size: 18px;
+      }
+
+      .step-list {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .step-item {
+        background-color: var(--md-sys-color-surface-variant);
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: 8px;
+        padding: 15px;
+        cursor: pointer;
+        transition:
+          transform 0.2s,
+          box-shadow 0.2s;
+      }
+
+      .step-item:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+
+      .step-item.selected {
+        border-color: var(--md-sys-color-primary);
+        border-width: 2px;
+      }
+
+      .step-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 8px;
+      }
+
+      .step-title {
+        font-weight: bold;
+        font-size: 16px;
+      }
+
+      .step-actions {
+        display: flex;
+        gap: 5px;
+      }
+
+      .step-actions button {
+        padding: 5px 10px;
+        font-size: 12px;
+      }
+
+      .step-type {
+        display: inline-block;
+        padding: 4px 8px;
+        background-color: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
+        border-radius: 4px;
+        font-size: 12px;
+        margin-bottom: 8px;
+      }
+
+      .step-config {
+        font-size: 12px;
+        color: var(--md-sys-color-on-surface-variant);
+        margin-top: 8px;
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 40px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .add-step-button {
+        width: 100%;
+        padding: 15px;
+        border: 2px dashed var(--md-sys-color-outline);
+        background-color: transparent;
+        color: var(--md-sys-color-on-surface);
+        cursor: pointer;
+        border-radius: 8px;
+        margin-top: 10px;
+      }
+
+      .add-step-button:hover {
+        border-color: var(--md-sys-color-primary);
+        background-color: var(--md-sys-color-surface-variant);
+      }
+
+      .loading {
+        text-align: center;
+        padding: 40px;
+      }
+
+      .error {
+        padding: 15px;
+        background-color: #ffebee;
+        color: #c62828;
+        border-radius: 4px;
+        margin-bottom: 20px;
+      }
+    `
+    ]; }
+    async firstUpdated() {
+        if (this.workflowId) {
+            await this.loadWorkflow();
+        }
+    }
+    async loadWorkflow() {
+        this.loading = true;
+        this.error = '';
+        try {
+            const response = await graphql_1.client.query({
+                query: (0, graphql_tag_1.default) `
+          query GetWorkflow($workflowId: String!) {
+            labelingWorkflow(workflowId: $workflowId) {
+              id
+              name
+              description
+              projectId
+              triggerType
+              triggerConfig
+              steps {
+                name
+                type
+                order
+                config
+                continueOnError
+              }
+              status
+              autoStart
+            }
+          }
+        `,
+                variables: { workflowId: this.workflowId }
+            });
+            this.workflow = response.data.labelingWorkflow;
+        }
+        catch (error) {
+            console.error('Failed to load workflow:', error);
+            this.error = 'Failed to load workflow. Please try again.';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    async saveWorkflow() {
+        this.loading = true;
+        this.error = '';
+        try {
+            const mutation = this.workflowId
+                ? (0, graphql_tag_1.default) `
+            mutation UpdateWorkflow($workflowId: String!, $input: UpdateWorkflowRequest!) {
+              updateLabelingWorkflow(workflowId: $workflowId, input: $input) {
+                id
+                name
+              }
+            }
+          `
+                : (0, graphql_tag_1.default) `
+            mutation CreateWorkflow($input: CreateWorkflowRequest!) {
+              createLabelingWorkflow(input: $input) {
+                id
+                name
+              }
+            }
+          `;
+            const variables = {
+                input: {
+                    name: this.workflow.name,
+                    description: this.workflow.description,
+                    projectId: parseInt(this.workflow.projectId),
+                    triggerType: this.workflow.triggerType,
+                    triggerConfig: this.workflow.triggerConfig,
+                    steps: this.workflow.steps.map((step, index) => ({
+                        name: step.name,
+                        type: step.type,
+                        order: index + 1,
+                        config: step.config,
+                        continueOnError: step.continueOnError || false
+                    })),
+                    autoStart: this.workflow.autoStart
+                }
+            };
+            if (this.workflowId) {
+                variables.workflowId = this.workflowId;
+            }
+            await graphql_1.client.mutate({ mutation, variables });
+            alert('Workflow saved successfully!');
+            history.back();
+        }
+        catch (error) {
+            console.error('Failed to save workflow:', error);
+            this.error = 'Failed to save workflow. Please check your inputs and try again.';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    addStep() {
+        const newStep = {
+            name: `Step ${this.workflow.steps.length + 1}`,
+            type: 'import_data',
+            config: '{}',
+            continueOnError: false
+        };
+        this.workflow = {
+            ...this.workflow,
+            steps: [...this.workflow.steps, newStep]
+        };
+        this.selectedStepIndex = this.workflow.steps.length - 1;
+    }
+    removeStep(index) {
+        if (confirm('Are you sure you want to remove this step?')) {
+            const steps = [...this.workflow.steps];
+            steps.splice(index, 1);
+            this.workflow = {
+                ...this.workflow,
+                steps
+            };
+            if (this.selectedStepIndex === index) {
+                this.selectedStepIndex = -1;
+            }
+            else if (this.selectedStepIndex > index) {
+                this.selectedStepIndex--;
+            }
+        }
+    }
+    moveStepUp(index) {
+        if (index === 0)
+            return;
+        const steps = [...this.workflow.steps];
+        const temp = steps[index];
+        steps[index] = steps[index - 1];
+        steps[index - 1] = temp;
+        this.workflow = {
+            ...this.workflow,
+            steps
+        };
+        if (this.selectedStepIndex === index) {
+            this.selectedStepIndex = index - 1;
+        }
+        else if (this.selectedStepIndex === index - 1) {
+            this.selectedStepIndex = index;
+        }
+    }
+    moveStepDown(index) {
+        if (index === this.workflow.steps.length - 1)
+            return;
+        const steps = [...this.workflow.steps];
+        const temp = steps[index];
+        steps[index] = steps[index + 1];
+        steps[index + 1] = temp;
+        this.workflow = {
+            ...this.workflow,
+            steps
+        };
+        if (this.selectedStepIndex === index) {
+            this.selectedStepIndex = index + 1;
+        }
+        else if (this.selectedStepIndex === index + 1) {
+            this.selectedStepIndex = index;
+        }
+    }
+    selectStep(index) {
+        this.selectedStepIndex = index;
+    }
+    updateStep(index, field, value) {
+        const steps = [...this.workflow.steps];
+        steps[index] = {
+            ...steps[index],
+            [field]: value
+        };
+        this.workflow = {
+            ...this.workflow,
+            steps
+        };
+    }
+    updateWorkflow(field, value) {
+        this.workflow = {
+            ...this.workflow,
+            [field]: value
+        };
+    }
+    renderStepEditor() {
+        if (this.selectedStepIndex === -1 || !this.workflow.steps[this.selectedStepIndex]) {
+            return (0, lit_1.html) ` <div class="empty-state">Select a step to edit its configuration</div> `;
+        }
+        const step = this.workflow.steps[this.selectedStepIndex];
+        return (0, lit_1.html) `
+      <div class="form-group">
+        <label>Step Name</label>
+        <input
+          type="text"
+          .value=${step.name}
+          @input=${(e) => this.updateStep(this.selectedStepIndex, 'name', e.target.value)}
+        />
+      </div>
+
+      <div class="form-group">
+        <label>Step Type</label>
+        <select
+          .value=${step.type}
+          @change=${(e) => this.updateStep(this.selectedStepIndex, 'type', e.target.value)}
+        >
+          <option value="import_data">Import Data</option>
+          <option value="generate_predictions">Generate Predictions</option>
+          <option value="wait_for_annotations">Wait for Annotations</option>
+          <option value="sync_annotations">Sync Annotations</option>
+          <option value="validate_quality">Validate Quality</option>
+          <option value="export_results">Export Results</option>
+          <option value="notification">Notification</option>
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label>Configuration (JSON)</label>
+        <textarea
+          .value=${step.config}
+          @input=${(e) => this.updateStep(this.selectedStepIndex, 'config', e.target.value)}
+          placeholder='{"key": "value"}'
+        ></textarea>
+      </div>
+
+      <div class="form-group">
+        <label>
+          <input
+            type="checkbox"
+            .checked=${step.continueOnError}
+            @change=${(e) => this.updateStep(this.selectedStepIndex, 'continueOnError', e.target.checked)}
+          />
+          Continue on Error
+        </label>
+      </div>
+    `;
+    }
+    render() {
+        if (this.loading) {
+            return (0, lit_1.html) `<div class="loading">Loading...</div>`;
+        }
+        return (0, lit_1.html) `
+      <div class="header">
+        <h1>${this.workflowId ? 'Edit Workflow' : 'Create Workflow'}</h1>
+        <div class="header-actions">
+          <button class="secondary" @click=${() => history.back()}>Cancel</button>
+          <button @click=${this.saveWorkflow}>Save Workflow</button>
+        </div>
+      </div>
+
+      ${this.error ? (0, lit_1.html) `<div class="error">${this.error}</div>` : ''}
+
+      <div class="content">
+        <div class="sidebar">
+          <div class="form-group">
+            <label>Workflow Name *</label>
+            <input
+              type="text"
+              .value=${this.workflow.name}
+              @input=${(e) => this.updateWorkflow('name', e.target.value)}
+              placeholder="Enter workflow name"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label>Description</label>
+            <textarea
+              .value=${this.workflow.description || ''}
+              @input=${(e) => this.updateWorkflow('description', e.target.value)}
+              placeholder="Enter workflow description"
+            ></textarea>
+          </div>
+
+          <div class="form-group">
+            <label>Project ID *</label>
+            <input
+              type="number"
+              .value=${this.workflow.projectId || ''}
+              @input=${(e) => this.updateWorkflow('projectId', e.target.value)}
+              placeholder="Label Studio project ID"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label>Trigger Type</label>
+            <select
+              .value=${this.workflow.triggerType}
+              @change=${(e) => this.updateWorkflow('triggerType', e.target.value)}
+            >
+              <option value="manual">Manual</option>
+              <option value="scheduled">Scheduled</option>
+              <option value="event">Event-based</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label>
+              <input
+                type="checkbox"
+                .checked=${this.workflow.autoStart}
+                @change=${(e) => this.updateWorkflow('autoStart', e.target.checked)}
+              />
+              Auto Start
+            </label>
+          </div>
+
+          <div class="steps-container">
+            <div class="steps-header">
+              <h2>Workflow Steps</h2>
+            </div>
+
+            <div class="step-list">
+              ${this.workflow.steps.length === 0
+            ? (0, lit_1.html) `<div class="empty-state">No steps added yet</div>`
+            : this.workflow.steps.map((step, index) => (0, lit_1.html) `
+                      <div
+                        class="step-item ${this.selectedStepIndex === index ? 'selected' : ''}"
+                        @click=${() => this.selectStep(index)}
+                      >
+                        <div class="step-header">
+                          <div class="step-title">${index + 1}. ${step.name}</div>
+                          <div class="step-actions">
+                            ${index > 0
+                ? (0, lit_1.html) `<button
+                                  @click=${(e) => {
+                    e.stopPropagation();
+                    this.moveStepUp(index);
+                }}
+                                >
+                                  ↑
+                                </button>`
+                : ''}
+                            ${index < this.workflow.steps.length - 1
+                ? (0, lit_1.html) `<button
+                                  @click=${(e) => {
+                    e.stopPropagation();
+                    this.moveStepDown(index);
+                }}
+                                >
+                                  ↓
+                                </button>`
+                : ''}
+                            <button
+                              class="secondary"
+                              @click=${(e) => {
+                e.stopPropagation();
+                this.removeStep(index);
+            }}
+                            >
+                              ×
+                            </button>
+                          </div>
+                        </div>
+                        <div class="step-type">${step.type}</div>
+                        ${step.continueOnError ? (0, lit_1.html) `<div class="step-config">Continue on error: Yes</div>` : ''}
+                      </div>
+                    `)}
+            </div>
+
+            <button class="add-step-button" @click=${this.addStep}>+ Add Step</button>
+          </div>
+        </div>
+
+        <div class="main-area">
+          <h2>Step Configuration</h2>
+          ${this.renderStepEditor()}
+        </div>
+      </div>
+    `;
+    }
+};
+exports.LabelingWorkflowBuilderPage = LabelingWorkflowBuilderPage;
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: String }),
+    tslib_1.__metadata("design:type", String)
+], LabelingWorkflowBuilderPage.prototype, "workflowId", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.state)(),
+    tslib_1.__metadata("design:type", Object)
+], LabelingWorkflowBuilderPage.prototype, "workflow", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.state)(),
+    tslib_1.__metadata("design:type", Number)
+], LabelingWorkflowBuilderPage.prototype, "selectedStepIndex", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.state)(),
+    tslib_1.__metadata("design:type", Boolean)
+], LabelingWorkflowBuilderPage.prototype, "loading", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.state)(),
+    tslib_1.__metadata("design:type", String)
+], LabelingWorkflowBuilderPage.prototype, "error", void 0);
+exports.LabelingWorkflowBuilderPage = LabelingWorkflowBuilderPage = tslib_1.__decorate([
+    (0, decorators_js_1.customElement)('labeling-workflow-builder-page')
+], LabelingWorkflowBuilderPage);
+//# sourceMappingURL=labeling-workflow-builder.js.map