@things-factory/labeling 9.1.19

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

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

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