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

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"]}

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

@@ -0,0 +1,24 @@
+import { PageView } from '@operato/shell';
+/**
+ * Workflow List Page
+ *
+ * Displays all labeling workflows with CRUD operations
+ */
+export declare class LabelingWorkflowListPage extends PageView {
+    static styles: import("lit").CSSResult[];
+    workflows: any[];
+    loading: boolean;
+    filterStatus: string;
+    filterProjectId: string;
+    firstUpdated(): Promise<void>;
+    loadWorkflows(): Promise<void>;
+    createWorkflow(): void;
+    editWorkflow(workflowId: string, event: Event): void;
+    executeWorkflow(workflowId: string, event: Event): Promise<void>;
+    pauseWorkflow(workflowId: string, event: Event): Promise<void>;
+    resumeWorkflow(workflowId: string, event: Event): Promise<void>;
+    deleteWorkflow(workflowId: string, event: Event): Promise<void>;
+    getStatusClass(status: string): "status-active" | "status-draft" | "status-paused" | "status-completed" | "status-failed" | "";
+    get filteredWorkflows(): any[];
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,495 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelingWorkflowListPage = 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"));
+const shell_2 = require("@operato/shell");
+/**
+ * Workflow List Page
+ *
+ * Displays all labeling workflows with CRUD operations
+ */
+let LabelingWorkflowListPage = class LabelingWorkflowListPage extends shell_1.PageView {
+    constructor() {
+        super(...arguments);
+        this.workflows = [];
+        this.loading = true;
+        this.filterStatus = 'all';
+        this.filterProjectId = '';
+    }
+    static { this.styles = [
+        (0, lit_1.css) `
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        background-color: var(--md-sys-color-surface);
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+      }
+
+      h1 {
+        font-size: 24px;
+        margin: 0;
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .toolbar {
+        display: flex;
+        gap: 10px;
+      }
+
+      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;
+      }
+
+      button:hover {
+        opacity: 0.9;
+      }
+
+      button.secondary {
+        background-color: var(--md-sys-color-secondary);
+        color: var(--md-sys-color-on-secondary);
+      }
+
+      .workflow-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        gap: 20px;
+      }
+
+      .workflow-card {
+        background-color: var(--md-sys-color-surface-variant);
+        border-radius: 8px;
+        padding: 20px;
+        cursor: pointer;
+        transition:
+          transform 0.2s,
+          box-shadow 0.2s;
+        border: 1px solid var(--md-sys-color-outline);
+      }
+
+      .workflow-card:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+
+      .workflow-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: start;
+        margin-bottom: 10px;
+      }
+
+      .workflow-name {
+        font-size: 18px;
+        font-weight: bold;
+        margin-bottom: 5px;
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .workflow-status {
+        display: inline-block;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      .status-active {
+        background-color: #4caf50;
+        color: white;
+      }
+
+      .status-draft {
+        background-color: #9e9e9e;
+        color: white;
+      }
+
+      .status-paused {
+        background-color: #ff9800;
+        color: white;
+      }
+
+      .status-completed {
+        background-color: #2196f3;
+        color: white;
+      }
+
+      .status-failed {
+        background-color: #f44336;
+        color: white;
+      }
+
+      .workflow-description {
+        font-size: 14px;
+        color: var(--md-sys-color-on-surface-variant);
+        margin-bottom: 10px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      .workflow-info {
+        font-size: 12px;
+        color: var(--md-sys-color-on-surface-variant);
+        margin-bottom: 5px;
+      }
+
+      .workflow-steps {
+        font-size: 12px;
+        color: var(--md-sys-color-on-surface-variant);
+        margin-top: 10px;
+        padding-top: 10px;
+        border-top: 1px solid var(--md-sys-color-outline);
+      }
+
+      .workflow-actions {
+        display: flex;
+        gap: 5px;
+        margin-top: 15px;
+      }
+
+      .workflow-actions button {
+        flex: 1;
+        padding: 8px;
+        font-size: 12px;
+      }
+
+      .loading {
+        text-align: center;
+        padding: 40px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 60px 20px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .empty-state h2 {
+        font-size: 20px;
+        margin-bottom: 10px;
+      }
+
+      .empty-state p {
+        font-size: 14px;
+        margin-bottom: 20px;
+      }
+
+      .filter-bar {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 20px;
+        align-items: center;
+      }
+
+      .filter-bar select,
+      .filter-bar input {
+        padding: 8px 12px;
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: 4px;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .filter-bar label {
+        font-size: 14px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+    `
+    ]; }
+    async firstUpdated() {
+        await this.loadWorkflows();
+    }
+    async loadWorkflows() {
+        this.loading = true;
+        try {
+            const response = await graphql_1.client.query({
+                query: (0, graphql_tag_1.default) `
+          query GetWorkflows($projectId: Int) {
+            labelingWorkflows(projectId: $projectId) {
+              items {
+                id
+                name
+                description
+                projectId
+                status
+                triggerType
+                steps {
+                  name
+                  type
+                }
+                createdAt
+                lastExecutedAt
+              }
+            }
+          }
+        `,
+                variables: this.filterProjectId ? { projectId: parseInt(this.filterProjectId) } : {}
+            });
+            this.workflows = response.data.labelingWorkflows.items || [];
+        }
+        catch (error) {
+            console.error('Failed to load workflows:', error);
+            alert('Failed to load workflows');
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    createWorkflow() {
+        (0, shell_2.navigate)('workflow-builder');
+    }
+    editWorkflow(workflowId, event) {
+        event.stopPropagation();
+        (0, shell_2.navigate)(`workflow-builder/${workflowId}`);
+    }
+    async executeWorkflow(workflowId, event) {
+        event.stopPropagation();
+        if (!confirm('Execute this workflow?'))
+            return;
+        try {
+            const response = await graphql_1.client.mutate({
+                mutation: (0, graphql_tag_1.default) `
+          mutation ExecuteWorkflow($workflowId: String!) {
+            executeLabelingWorkflow(input: { workflowId: $workflowId }) {
+              executionId
+              status
+              summary
+            }
+          }
+        `,
+                variables: { workflowId }
+            });
+            const result = response.data.executeLabelingWorkflow;
+            alert(`Workflow execution started!\nExecution ID: ${result.executionId}`);
+            await this.loadWorkflows();
+        }
+        catch (error) {
+            console.error('Failed to execute workflow:', error);
+            alert('Failed to execute workflow');
+        }
+    }
+    async pauseWorkflow(workflowId, event) {
+        event.stopPropagation();
+        if (!confirm('Pause this workflow?'))
+            return;
+        try {
+            await graphql_1.client.mutate({
+                mutation: (0, graphql_tag_1.default) `
+          mutation PauseWorkflow($workflowId: String!) {
+            pauseLabelingWorkflow(workflowId: $workflowId) {
+              id
+              status
+            }
+          }
+        `,
+                variables: { workflowId }
+            });
+            alert('Workflow paused successfully');
+            await this.loadWorkflows();
+        }
+        catch (error) {
+            console.error('Failed to pause workflow:', error);
+            alert('Failed to pause workflow');
+        }
+    }
+    async resumeWorkflow(workflowId, event) {
+        event.stopPropagation();
+        if (!confirm('Resume this workflow?'))
+            return;
+        try {
+            await graphql_1.client.mutate({
+                mutation: (0, graphql_tag_1.default) `
+          mutation ResumeWorkflow($workflowId: String!) {
+            resumeLabelingWorkflow(workflowId: $workflowId) {
+              id
+              status
+            }
+          }
+        `,
+                variables: { workflowId }
+            });
+            alert('Workflow resumed successfully');
+            await this.loadWorkflows();
+        }
+        catch (error) {
+            console.error('Failed to resume workflow:', error);
+            alert('Failed to resume workflow');
+        }
+    }
+    async deleteWorkflow(workflowId, event) {
+        event.stopPropagation();
+        if (!confirm('Are you sure you want to delete this workflow? This action cannot be undone.'))
+            return;
+        try {
+            await graphql_1.client.mutate({
+                mutation: (0, graphql_tag_1.default) `
+          mutation DeleteWorkflow($workflowId: String!) {
+            deleteLabelingWorkflow(workflowId: $workflowId)
+          }
+        `,
+                variables: { workflowId }
+            });
+            alert('Workflow deleted successfully');
+            await this.loadWorkflows();
+        }
+        catch (error) {
+            console.error('Failed to delete workflow:', error);
+            alert('Failed to delete workflow');
+        }
+    }
+    getStatusClass(status) {
+        switch (status?.toLowerCase()) {
+            case 'active':
+                return 'status-active';
+            case 'draft':
+                return 'status-draft';
+            case 'paused':
+                return 'status-paused';
+            case 'completed':
+                return 'status-completed';
+            case 'failed':
+                return 'status-failed';
+            default:
+                return '';
+        }
+    }
+    get filteredWorkflows() {
+        return this.workflows.filter(workflow => {
+            if (this.filterStatus !== 'all' && workflow.status !== this.filterStatus) {
+                return false;
+            }
+            return true;
+        });
+    }
+    render() {
+        if (this.loading) {
+            return (0, lit_1.html) `<div class="loading">Loading workflows...</div>`;
+        }
+        return (0, lit_1.html) `
+      <div class="header">
+        <h1>Labeling Workflows</h1>
+        <div class="toolbar">
+          <button @click=${this.createWorkflow}>Create Workflow</button>
+          <button class="secondary" @click=${this.loadWorkflows}>Refresh</button>
+        </div>
+      </div>
+
+      <div class="filter-bar">
+        <label>Status:</label>
+        <select
+          .value=${this.filterStatus}
+          @change=${(e) => {
+            this.filterStatus = e.target.value;
+            this.requestUpdate();
+        }}
+        >
+          <option value="all">All</option>
+          <option value="draft">Draft</option>
+          <option value="active">Active</option>
+          <option value="paused">Paused</option>
+          <option value="completed">Completed</option>
+          <option value="failed">Failed</option>
+        </select>
+
+        <label>Project ID:</label>
+        <input
+          type="number"
+          .value=${this.filterProjectId}
+          @input=${(e) => (this.filterProjectId = e.target.value)}
+          placeholder="Filter by project"
+        />
+        <button class="secondary" @click=${this.loadWorkflows}>Apply Filter</button>
+      </div>
+
+      ${this.filteredWorkflows.length === 0
+            ? (0, lit_1.html) `
+            <div class="empty-state">
+              <h2>No workflows found</h2>
+              <p>Create your first labeling workflow to get started</p>
+              <button @click=${this.createWorkflow}>Create Workflow</button>
+            </div>
+          `
+            : (0, lit_1.html) `
+            <div class="workflow-list">
+              ${this.filteredWorkflows.map(workflow => (0, lit_1.html) `
+                  <div class="workflow-card">
+                    <div class="workflow-header">
+                      <div class="workflow-name">${workflow.name}</div>
+                      <span class="workflow-status ${this.getStatusClass(workflow.status)}">${workflow.status}</span>
+                    </div>
+
+                    <div class="workflow-description">${workflow.description || 'No description'}</div>
+
+                    <div class="workflow-info">Project ID: ${workflow.projectId}</div>
+                    <div class="workflow-info">Trigger: ${workflow.triggerType}</div>
+                    <div class="workflow-info">Created: ${new Date(workflow.createdAt).toLocaleDateString()}</div>
+                    ${workflow.lastExecutedAt
+                ? (0, lit_1.html) `<div class="workflow-info">
+                          Last executed: ${new Date(workflow.lastExecutedAt).toLocaleDateString()}
+                        </div>`
+                : ''}
+
+                    <div class="workflow-steps">${workflow.steps.length} steps configured</div>
+
+                    <div class="workflow-actions">
+                      <button @click=${(e) => this.editWorkflow(workflow.id, e)}>Edit</button>
+                      <button @click=${(e) => this.executeWorkflow(workflow.id, e)}>Execute</button>
+                      ${workflow.status === 'active'
+                ? (0, lit_1.html) `<button class="secondary" @click=${(e) => this.pauseWorkflow(workflow.id, e)}>
+                            Pause
+                          </button>`
+                : workflow.status === 'paused'
+                    ? (0, lit_1.html) `<button @click=${(e) => this.resumeWorkflow(workflow.id, e)}>Resume</button>`
+                    : ''}
+                      <button class="secondary" @click=${(e) => this.deleteWorkflow(workflow.id, e)}>
+                        Delete
+                      </button>
+                    </div>
+                  </div>
+                `)}
+            </div>
+          `}
+    `;
+    }
+};
+exports.LabelingWorkflowListPage = LabelingWorkflowListPage;
+tslib_1.__decorate([
+    (0, decorators_js_1.state)(),
+    tslib_1.__metadata("design:type", Array)
+], LabelingWorkflowListPage.prototype, "workflows", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.state)(),
+    tslib_1.__metadata("design:type", Boolean)
+], LabelingWorkflowListPage.prototype, "loading", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.state)(),
+    tslib_1.__metadata("design:type", String)
+], LabelingWorkflowListPage.prototype, "filterStatus", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.state)(),
+    tslib_1.__metadata("design:type", String)
+], LabelingWorkflowListPage.prototype, "filterProjectId", void 0);
+exports.LabelingWorkflowListPage = LabelingWorkflowListPage = tslib_1.__decorate([
+    (0, decorators_js_1.customElement)('labeling-workflow-list-page')
+], LabelingWorkflowListPage);
+//# sourceMappingURL=labeling-workflow-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"labeling-workflow-list.js","sourceRoot":"","sources":["../../client/pages/labeling-workflow-list.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { PageView } from '@operato/shell'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\nimport { navigate } from '@operato/shell'\n\n/**\n * Workflow List Page\n *\n * Displays all labeling workflows with CRUD operations\n */\n@customElement('labeling-workflow-list-page')\nexport class LabelingWorkflowListPage extends PageView {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        padding: 20px;\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        margin-bottom: 20px;\n      }\n\n      h1 {\n        font-size: 24px;\n        margin: 0;\n        color: var(--md-sys-color-on-surface);\n      }\n\n      .toolbar {\n        display: flex;\n        gap: 10px;\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      }\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      .workflow-list {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n        gap: 20px;\n      }\n\n      .workflow-card {\n        background-color: var(--md-sys-color-surface-variant);\n        border-radius: 8px;\n        padding: 20px;\n        cursor: pointer;\n        transition:\n          transform 0.2s,\n          box-shadow 0.2s;\n        border: 1px solid var(--md-sys-color-outline);\n      }\n\n      .workflow-card:hover {\n        transform: translateY(-4px);\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      }\n\n      .workflow-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: start;\n        margin-bottom: 10px;\n      }\n\n      .workflow-name {\n        font-size: 18px;\n        font-weight: bold;\n        margin-bottom: 5px;\n        color: var(--md-sys-color-on-surface);\n      }\n\n      .workflow-status {\n        display: inline-block;\n        padding: 4px 8px;\n        border-radius: 4px;\n        font-size: 12px;\n        font-weight: 500;\n      }\n\n      .status-active {\n        background-color: #4caf50;\n        color: white;\n      }\n\n      .status-draft {\n        background-color: #9e9e9e;\n        color: white;\n      }\n\n      .status-paused {\n        background-color: #ff9800;\n        color: white;\n      }\n\n      .status-completed {\n        background-color: #2196f3;\n        color: white;\n      }\n\n      .status-failed {\n        background-color: #f44336;\n        color: white;\n      }\n\n      .workflow-description {\n        font-size: 14px;\n        color: var(--md-sys-color-on-surface-variant);\n        margin-bottom: 10px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      .workflow-info {\n        font-size: 12px;\n        color: var(--md-sys-color-on-surface-variant);\n        margin-bottom: 5px;\n      }\n\n      .workflow-steps {\n        font-size: 12px;\n        color: var(--md-sys-color-on-surface-variant);\n        margin-top: 10px;\n        padding-top: 10px;\n        border-top: 1px solid var(--md-sys-color-outline);\n      }\n\n      .workflow-actions {\n        display: flex;\n        gap: 5px;\n        margin-top: 15px;\n      }\n\n      .workflow-actions button {\n        flex: 1;\n        padding: 8px;\n        font-size: 12px;\n      }\n\n      .loading {\n        text-align: center;\n        padding: 40px;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      .empty-state {\n        text-align: center;\n        padding: 60px 20px;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      .empty-state h2 {\n        font-size: 20px;\n        margin-bottom: 10px;\n      }\n\n      .empty-state p {\n        font-size: 14px;\n        margin-bottom: 20px;\n      }\n\n      .filter-bar {\n        display: flex;\n        gap: 10px;\n        margin-bottom: 20px;\n        align-items: center;\n      }\n\n      .filter-bar select,\n      .filter-bar input {\n        padding: 8px 12px;\n        border: 1px solid var(--md-sys-color-outline);\n        border-radius: 4px;\n        background-color: var(--md-sys-color-surface);\n        color: var(--md-sys-color-on-surface);\n      }\n\n      .filter-bar label {\n        font-size: 14px;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n    `\n  ]\n\n  @state() workflows: any[] = []\n  @state() loading: boolean = true\n  @state() filterStatus: string = 'all'\n  @state() filterProjectId: string = ''\n\n  async firstUpdated() {\n    await this.loadWorkflows()\n  }\n\n  async loadWorkflows() {\n    this.loading = true\n    try {\n      const response = await client.query({\n        query: gql`\n          query GetWorkflows($projectId: Int) {\n            labelingWorkflows(projectId: $projectId) {\n              items {\n                id\n                name\n                description\n                projectId\n                status\n                triggerType\n                steps {\n                  name\n                  type\n                }\n                createdAt\n                lastExecutedAt\n              }\n            }\n          }\n        `,\n        variables: this.filterProjectId ? { projectId: parseInt(this.filterProjectId) } : {}\n      })\n\n      this.workflows = response.data.labelingWorkflows.items || []\n    } catch (error) {\n      console.error('Failed to load workflows:', error)\n      alert('Failed to load workflows')\n    } finally {\n      this.loading = false\n    }\n  }\n\n  createWorkflow() {\n    navigate('workflow-builder')\n  }\n\n  editWorkflow(workflowId: string, event: Event) {\n    event.stopPropagation()\n    navigate(`workflow-builder/${workflowId}`)\n  }\n\n  async executeWorkflow(workflowId: string, event: Event) {\n    event.stopPropagation()\n\n    if (!confirm('Execute this workflow?')) return\n\n    try {\n      const response = await client.mutate({\n        mutation: gql`\n          mutation ExecuteWorkflow($workflowId: String!) {\n            executeLabelingWorkflow(input: { workflowId: $workflowId }) {\n              executionId\n              status\n              summary\n            }\n          }\n        `,\n        variables: { workflowId }\n      })\n\n      const result = response.data.executeLabelingWorkflow\n      alert(`Workflow execution started!\\nExecution ID: ${result.executionId}`)\n      await this.loadWorkflows()\n    } catch (error) {\n      console.error('Failed to execute workflow:', error)\n      alert('Failed to execute workflow')\n    }\n  }\n\n  async pauseWorkflow(workflowId: string, event: Event) {\n    event.stopPropagation()\n\n    if (!confirm('Pause this workflow?')) return\n\n    try {\n      await client.mutate({\n        mutation: gql`\n          mutation PauseWorkflow($workflowId: String!) {\n            pauseLabelingWorkflow(workflowId: $workflowId) {\n              id\n              status\n            }\n          }\n        `,\n        variables: { workflowId }\n      })\n\n      alert('Workflow paused successfully')\n      await this.loadWorkflows()\n    } catch (error) {\n      console.error('Failed to pause workflow:', error)\n      alert('Failed to pause workflow')\n    }\n  }\n\n  async resumeWorkflow(workflowId: string, event: Event) {\n    event.stopPropagation()\n\n    if (!confirm('Resume this workflow?')) return\n\n    try {\n      await client.mutate({\n        mutation: gql`\n          mutation ResumeWorkflow($workflowId: String!) {\n            resumeLabelingWorkflow(workflowId: $workflowId) {\n              id\n              status\n            }\n          }\n        `,\n        variables: { workflowId }\n      })\n\n      alert('Workflow resumed successfully')\n      await this.loadWorkflows()\n    } catch (error) {\n      console.error('Failed to resume workflow:', error)\n      alert('Failed to resume workflow')\n    }\n  }\n\n  async deleteWorkflow(workflowId: string, event: Event) {\n    event.stopPropagation()\n\n    if (!confirm('Are you sure you want to delete this workflow? This action cannot be undone.')) return\n\n    try {\n      await client.mutate({\n        mutation: gql`\n          mutation DeleteWorkflow($workflowId: String!) {\n            deleteLabelingWorkflow(workflowId: $workflowId)\n          }\n        `,\n        variables: { workflowId }\n      })\n\n      alert('Workflow deleted successfully')\n      await this.loadWorkflows()\n    } catch (error) {\n      console.error('Failed to delete workflow:', error)\n      alert('Failed to delete workflow')\n    }\n  }\n\n  getStatusClass(status: string) {\n    switch (status?.toLowerCase()) {\n      case 'active':\n        return 'status-active'\n      case 'draft':\n        return 'status-draft'\n      case 'paused':\n        return 'status-paused'\n      case 'completed':\n        return 'status-completed'\n      case 'failed':\n        return 'status-failed'\n      default:\n        return ''\n    }\n  }\n\n  get filteredWorkflows() {\n    return this.workflows.filter(workflow => {\n      if (this.filterStatus !== 'all' && workflow.status !== this.filterStatus) {\n        return false\n      }\n      return true\n    })\n  }\n\n  render() {\n    if (this.loading) {\n      return html`<div class=\"loading\">Loading workflows...</div>`\n    }\n\n    return html`\n      <div class=\"header\">\n        <h1>Labeling Workflows</h1>\n        <div class=\"toolbar\">\n          <button @click=${this.createWorkflow}>Create Workflow</button>\n          <button class=\"secondary\" @click=${this.loadWorkflows}>Refresh</button>\n        </div>\n      </div>\n\n      <div class=\"filter-bar\">\n        <label>Status:</label>\n        <select\n          .value=${this.filterStatus}\n          @change=${(e: any) => {\n            this.filterStatus = e.target.value\n            this.requestUpdate()\n          }}\n        >\n          <option value=\"all\">All</option>\n          <option value=\"draft\">Draft</option>\n          <option value=\"active\">Active</option>\n          <option value=\"paused\">Paused</option>\n          <option value=\"completed\">Completed</option>\n          <option value=\"failed\">Failed</option>\n        </select>\n\n        <label>Project ID:</label>\n        <input\n          type=\"number\"\n          .value=${this.filterProjectId}\n          @input=${(e: any) => (this.filterProjectId = e.target.value)}\n          placeholder=\"Filter by project\"\n        />\n        <button class=\"secondary\" @click=${this.loadWorkflows}>Apply Filter</button>\n      </div>\n\n      ${this.filteredWorkflows.length === 0\n        ? html`\n            <div class=\"empty-state\">\n              <h2>No workflows found</h2>\n              <p>Create your first labeling workflow to get started</p>\n              <button @click=${this.createWorkflow}>Create Workflow</button>\n            </div>\n          `\n        : html`\n            <div class=\"workflow-list\">\n              ${this.filteredWorkflows.map(\n                workflow => html`\n                  <div class=\"workflow-card\">\n                    <div class=\"workflow-header\">\n                      <div class=\"workflow-name\">${workflow.name}</div>\n                      <span class=\"workflow-status ${this.getStatusClass(workflow.status)}\">${workflow.status}</span>\n                    </div>\n\n                    <div class=\"workflow-description\">${workflow.description || 'No description'}</div>\n\n                    <div class=\"workflow-info\">Project ID: ${workflow.projectId}</div>\n                    <div class=\"workflow-info\">Trigger: ${workflow.triggerType}</div>\n                    <div class=\"workflow-info\">Created: ${new Date(workflow.createdAt).toLocaleDateString()}</div>\n                    ${workflow.lastExecutedAt\n                      ? html`<div class=\"workflow-info\">\n                          Last executed: ${new Date(workflow.lastExecutedAt).toLocaleDateString()}\n                        </div>`\n                      : ''}\n\n                    <div class=\"workflow-steps\">${workflow.steps.length} steps configured</div>\n\n                    <div class=\"workflow-actions\">\n                      <button @click=${(e: Event) => this.editWorkflow(workflow.id, e)}>Edit</button>\n                      <button @click=${(e: Event) => this.executeWorkflow(workflow.id, e)}>Execute</button>\n                      ${workflow.status === 'active'\n                        ? html`<button class=\"secondary\" @click=${(e: Event) => this.pauseWorkflow(workflow.id, e)}>\n                            Pause\n                          </button>`\n                        : workflow.status === 'paused'\n                          ? html`<button @click=${(e: Event) => this.resumeWorkflow(workflow.id, e)}>Resume</button>`\n                          : ''}\n                      <button class=\"secondary\" @click=${(e: Event) => this.deleteWorkflow(workflow.id, e)}>\n                        Delete\n                      </button>\n                    </div>\n                  </div>\n                `\n              )}\n            </div>\n          `}\n    `\n  }\n}\n"]}

package/dist-client/route.d.ts

@@ -0,0 +1 @@
+export default function route(page: string): "labeling-workflows" | "labeling-workflow-builder";