@nyaruka/temba-components 0.125.0 → 0.127.0

package/src/chart/TembaChart.ts

@@ -292,9 +292,15 @@ export class TembaChart extends RapidElement {
   @property({ type: String })
   xType: 'category' | 'time' = 'category';
 
+  @property({ type: Number })
+  xMaxTicks: number = 10;
+
   @property({ type: String })
   yType: 'count' | 'duration' = 'count';
 
+  @property({ type: String })
+  xFormat: 'MMM yy' | 'MMM yyyy' | 'MMM dd' | 'DD' | 'EEE' | 'auto' = 'auto';
+
   @property({ type: Boolean })
   hideOther: boolean = false;
 
@@ -581,6 +587,9 @@ export class TembaChart extends RapidElement {
 
       const percentFormatter = (value: number): string => {
         const pct = grandTotal ? (value / grandTotal) * 100 : 0;
+        if (pct === 0) {
+          return '';
+        }
         return `${Math.round(pct)}%`;
       };
 
@@ -604,6 +613,21 @@ export class TembaChart extends RapidElement {
 
         this.chart.update();
       } else {
+        let format = this.xFormat;
+        if (this.xType === 'time' && this.xFormat === 'auto') {
+          const firstDate = this.data.labels[0];
+          const lastDate = this.data.labels[this.data.labels.length - 1];
+
+          const first = Date.parse(firstDate);
+          const last = Date.parse(lastDate);
+
+          const dayDiff = Math.ceil((last - first) / (1000 * 60 * 60 * 24));
+          format = 'MMM dd';
+          if (dayDiff > 365) {
+            format = 'MMM yyyy';
+          }
+        }
+
         const chartData = {
           type: this.chartType,
           data: {
@@ -664,6 +688,7 @@ export class TembaChart extends RapidElement {
                 },
                 ticks: {
                   display: !this.showPercent,
+
                   ...(this.yType === 'duration' &&
                     !this.showPercent && {
                       callback: (value: any) => formatDurationFromSeconds(value)
@@ -674,11 +699,16 @@ export class TembaChart extends RapidElement {
                 type: this.xType,
                 grid: { display: false },
                 stacked: true,
-                time: {
-                  unit: 'day',
-                  tooltipFormat: 'DDD',
-                  displayFormats: { day: 'MMM dd' }
-                }
+                ticks: {
+                  maxTicksLimit: this.xMaxTicks
+                },
+                ...(this.xType === 'time' && {
+                  time: {
+                    unit: 'day',
+                    tooltipFormat: 'DDD',
+                    displayFormats: { day: format }
+                  }
+                })
               }
             }
           }

package/src/flow/Editor.ts

@@ -9,15 +9,20 @@ import { RapidElement } from '../RapidElement';
 import { Plumber } from './Plumber';
 import { EditorNode } from './EditorNode';
 
+const SAVE_QUIET_TIME = 500;
+
 export class Editor extends RapidElement {
-  // Unfortunately, jsplumb requires that we be in light DOM
+  // unfortunately, jsplumb requires that we be in light DOM
   createRenderRoot() {
     return this;
   }
 
-  // This is the master plumber
+  // this is the master plumber
   private plumber: Plumber;
 
+  // timer for debounced saving
+  private saveTimer: number | null = null;
+
   @property({ type: String })
   public flow: string;
 
@@ -30,6 +35,9 @@ export class Editor extends RapidElement {
   @fromStore(zustand, (state: AppState) => state.canvasSize)
   private canvasSize!: { width: number; height: number };
 
+  @fromStore(zustand, (state: AppState) => state.dirtyDate)
+  private dirtyDate!: Date;
+
   static get styles() {
     return css`
       #editor {
@@ -40,7 +48,7 @@ export class Editor extends RapidElement {
       #grid {
         position: relative;
         background-color: #f9f9f9;
-        background-position: 13px 13px;
+        background-position: 10px 10px;
         background-image: linear-gradient(
             0deg,
             transparent 24%,
@@ -84,11 +92,11 @@ export class Editor extends RapidElement {
       }
 
       .jtk-endpoint {
-        z-index: 1;
+        z-index: 600;
       }
 
       .plumb-source {
-        z-index: 300;
+        z-index: 600;
         border: 0px solid var(--color-connectors);
       }
 
@@ -112,7 +120,7 @@ export class Editor extends RapidElement {
 
       .plumb-target {
         margin-top: -6px;
-        z-index: 200;
+        z-index: 600;
         opacity: 0;
         cursor: pointer;
       }
@@ -120,6 +128,29 @@ export class Editor extends RapidElement {
       body .plumb-connector path {
         stroke: var(--color-connectors) !important;
         stroke-width: 3px;
+        z-index: 10;
+      }
+
+      body .plumb-connector {
+        z-index: 10;
+      }
+
+      body .plumb-connector.elevated {
+        z-index: 550;
+      }
+
+      body .plumb-connector.elevated path {
+        stroke: var(--color-connectors) !important;
+        stroke-width: 3px;
+        z-index: 550;
+      }
+
+      body .plumb-connector.elevated .plumb-arrow {
+        fill: var(--color-connectors);
+        stroke: var(--color-connectors);
+        stroke-width: 0px;
+        margin-top: 6px;
+        z-index: 550;
       }
 
       body .plumb-connector .plumb-arrow {
@@ -127,6 +158,7 @@ export class Editor extends RapidElement {
         stroke: var(--color-connectors);
         stroke-width: 0px;
         margin-top: 6px;
+        z-index: 10;
       }
 
       body svg.jtk-connector.jtk-hover path {
@@ -137,6 +169,7 @@ export class Editor extends RapidElement {
       body .plumb-connector.jtk-hover .plumb-arrow {
         fill: var(--color-success) !important;
         stroke-width: 0px;
+        z-index: 10;
       }
     `;
   }
@@ -162,6 +195,45 @@ export class Editor extends RapidElement {
     if (changes.has('canvasSize')) {
       // console.log('Setting canvas size', this.canvasSize);
     }
+
+    if (changes.has('dirtyDate')) {
+      if (this.dirtyDate) {
+        this.debouncedSave();
+      }
+    }
+  }
+
+  private debouncedSave(): void {
+    // Clear any existing timer
+    if (this.saveTimer !== null) {
+      clearTimeout(this.saveTimer);
+    }
+
+    this.saveTimer = window.setTimeout(() => {
+      const now = new Date();
+      const timeSinceLastChange = now.getTime() - this.dirtyDate.getTime();
+
+      if (timeSinceLastChange >= SAVE_QUIET_TIME) {
+        this.saveChanges();
+        this.saveTimer = null;
+      } else {
+        this.debouncedSave();
+      }
+    }, SAVE_QUIET_TIME);
+  }
+
+  private saveChanges(): void {
+    // post the flow definition to the server
+    getStore().postJSON(`/flow/revisions/${this.flow}`, this.definition);
+    getStore().getState().setDirtyDate(null);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this.saveTimer !== null) {
+      clearTimeout(this.saveTimer);
+      this.saveTimer = null;
+    }
   }
 
   public render(): TemplateResult {

package/src/flow/EditorNode.ts

@@ -1,7 +1,7 @@
 import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 import { EDITOR_CONFIG, UIConfig } from './config';
 import { Action, Exit, Node, NodeUI, Router } from '../store/flow-definition';
-import { state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';
 import { Plumber } from './Plumber';
@@ -12,15 +12,31 @@ export class EditorNode extends RapidElement {
     return this;
   }
 
-  @state()
+  @property({ type: Object })
   private plumber: Plumber;
 
-  @state()
+  @property({ type: Object })
   private node: Node;
 
-  @state()
+  @property({ type: Object })
   private ui: NodeUI;
 
+  // Drag state properties
+  private isDragging = false;
+  private dragStartPos = { x: 0, y: 0 };
+  private nodeStartPos = { left: 0, top: 0 };
+
+  // Bound event handlers to maintain proper 'this' context
+  private boundMouseMove = this.handleMouseMove.bind(this);
+  private boundMouseUp = this.handleMouseUp.bind(this);
+
+  /**
+   * Snaps a coordinate value to the nearest 20px grid position
+   */
+  private snapToGrid(value: number): number {
+    return Math.round(value / 20) * 20;
+  }
+
   static get styles() {
     return css`
       .node {
@@ -31,6 +47,19 @@ export class EditorNode extends RapidElement {
         border-radius: calc(var(--curvature) * 1.5);
         overflow: hidden;
         color: #333;
+        cursor: move;
+        user-select: none;
+        z-index: 500;
+      }
+
+      .node:hover {
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+      }
+
+      .node.dragging {
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
+        transform: scale(1.02);
+        z-index: 1000;
       }
         
       .action {
@@ -129,9 +158,131 @@ export class EditorNode extends RapidElement {
           this.ui.position.left + rect.width,
           this.ui.position.top + rect.height
         );
+
+      // Add drag event listeners to the node
+      this.addDragEventListeners();
     }
   }
 
+  private addDragEventListeners(): void {
+    const nodeElement = this.querySelector('.node') as HTMLElement;
+    if (!nodeElement) return;
+
+    nodeElement.addEventListener('mousedown', this.handleMouseDown.bind(this));
+    document.addEventListener('mousemove', this.boundMouseMove);
+    document.addEventListener('mouseup', this.boundMouseUp);
+  }
+
+  private handleMouseDown(event: MouseEvent): void {
+    // Only start dragging if clicking on the node itself, not on exits or other interactive elements
+    const target = event.target as HTMLElement;
+    if (target.classList.contains('exit') || target.closest('.exit')) {
+      return;
+    }
+
+    this.isDragging = true;
+    this.dragStartPos = { x: event.clientX, y: event.clientY };
+    this.nodeStartPos = {
+      left: this.ui.position.left,
+      top: this.ui.position.top
+    };
+
+    // Add dragging class for visual feedback
+    const nodeElement = this.querySelector('.node') as HTMLElement;
+    if (nodeElement) {
+      nodeElement.classList.add('dragging');
+    }
+
+    // Elevate connections for this node during dragging
+    if (this.plumber) {
+      this.plumber.elevateNodeConnections(this.node.uuid);
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  private handleMouseMove(event: MouseEvent): void {
+    if (!this.isDragging) return;
+
+    const deltaX = event.clientX - this.dragStartPos.x;
+    const deltaY = event.clientY - this.dragStartPos.y;
+
+    const newLeft = this.nodeStartPos.left + deltaX;
+    const newTop = this.nodeStartPos.top + deltaY;
+
+    // Update the UI position temporarily (for visual feedback)
+    const nodeElement = this.querySelector('.node') as HTMLElement;
+    if (nodeElement) {
+      nodeElement.style.left = `${newLeft}px`;
+      nodeElement.style.top = `${newTop}px`;
+    }
+
+    // Repaint connections during dragging for smooth updates
+    if (this.plumber) {
+      this.plumber.repaintEverything();
+    }
+  }
+
+  private handleMouseUp(event: MouseEvent): void {
+    if (!this.isDragging) return;
+
+    this.isDragging = false;
+
+    // Remove dragging class
+    const nodeElement = this.querySelector('.node') as HTMLElement;
+    if (nodeElement) {
+      nodeElement.classList.remove('dragging');
+    }
+
+    // Restore normal z-index for connections
+    if (this.plumber) {
+      this.plumber.restoreNodeConnections(this.node.uuid);
+    }
+
+    const deltaX = event.clientX - this.dragStartPos.x;
+    const deltaY = event.clientY - this.dragStartPos.y;
+
+    const newLeft = this.nodeStartPos.left + deltaX;
+    const newTop = this.nodeStartPos.top + deltaY;
+
+    // Snap to 20px grid for final position
+    const snappedLeft = this.snapToGrid(newLeft);
+    const snappedTop = this.snapToGrid(newTop);
+
+    // Update the store with the new snapped position
+    const newPosition = { left: snappedLeft, top: snappedTop };
+    getStore()
+      .getState()
+      .updateCanvasPositions({
+        [this.node.uuid]: newPosition
+      });
+
+    // Repaint connections if plumber is available
+    if (this.plumber) {
+      this.plumber.repaintEverything();
+    }
+
+    getStore().getState().updateNodePosition(this.node.uuid, newPosition);
+
+    // Fire a custom event with the new coordinates
+    /*this.fireCustomEvent(CustomEventType.Moved, {
+      nodeId: this.node.uuid,
+      position: newPosition,
+      oldPosition: {
+        left: this.nodeStartPos.left,
+        top: this.nodeStartPos.top
+      }
+    });*/
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    // Clean up event listeners
+    document.removeEventListener('mousemove', this.boundMouseMove);
+    document.removeEventListener('mouseup', this.boundMouseUp);
+  }
+
   private renderTitle(config: UIConfig) {
     return html`<div class="title" style="background:${config.color}">
       ${config.name}
@@ -198,6 +349,10 @@ export class EditorNode extends RapidElement {
   }
 
   public render() {
+    if (!this.node || !this.ui) {
+      return html`<div class="node">Loading...</div>`;
+    }
+
     return html`
       <div
         id="${this.node.uuid}"

package/src/flow/Plumber.ts

@@ -132,4 +132,69 @@ export class Plumber {
     this.pendingConnections.push({ fromId, toId });
     this.processPendingConnections();
   }
+
+  public repaintEverything() {
+    if (this.jsPlumb) {
+      this.jsPlumb.repaintEverything();
+    }
+  }
+  public elevateNodeConnections(nodeId: string) {
+    if (!this.jsPlumb) return;
+
+    // Get all connections
+    const connections = this.jsPlumb.getConnections();
+
+    // Get the node element to find its exit elements
+    const nodeElement = document.getElementById(nodeId);
+    const exitElements = nodeElement
+      ? nodeElement.querySelectorAll('.exit')
+      : [];
+    const exitIds = Array.from(exitElements).map((exit) => exit.id);
+
+    connections.forEach((connection) => {
+      const sourceId = connection.source.id;
+      const targetId = connection.target.id;
+
+      // Check if this connection involves the dragged node:
+      // - Incoming: target is the node itself
+      // - Outgoing: source is one of the node's exits
+      if (targetId === nodeId || exitIds.includes(sourceId)) {
+        // Add elevated class to the connector element
+        const connectorElement = connection.connector.canvas;
+        if (connectorElement) {
+          connectorElement.classList.add('elevated');
+        }
+      }
+    });
+  }
+
+  public restoreNodeConnections(nodeId: string) {
+    if (!this.jsPlumb) return;
+
+    // Get all connections
+    const connections = this.jsPlumb.getConnections();
+
+    // Get the node element to find its exit elements
+    const nodeElement = document.getElementById(nodeId);
+    const exitElements = nodeElement
+      ? nodeElement.querySelectorAll('.exit')
+      : [];
+    const exitIds = Array.from(exitElements).map((exit) => exit.id);
+
+    connections.forEach((connection) => {
+      const sourceId = connection.source.id;
+      const targetId = connection.target.id;
+
+      // Check if this connection involves the node:
+      // - Incoming: target is the node itself
+      // - Outgoing: source is one of the node's exits
+      if (targetId === nodeId || exitIds.includes(sourceId)) {
+        // Remove elevated class from the connector element
+        const connectorElement = connection.connector.canvas;
+        if (connectorElement) {
+          connectorElement.classList.remove('elevated');
+        }
+      }
+    });
+  }
 }

package/src/interfaces.ts

@@ -284,5 +284,6 @@ export enum CustomEventType {
   Error = 'temba-error',
   Interrupt = 'temba-interrupt',
   Opened = 'temba-opened',
-  TicketUpdated = 'temba-ticket-updated'
+  TicketUpdated = 'temba-ticket-updated',
+  Moved = 'temba-moved'
 }

package/src/store/AppState.ts

@@ -65,6 +65,8 @@ export interface AppState {
   workspace: Workspace;
   isTranslating: boolean;
 
+  dirtyDate: Date | null;
+
   canvasSize: { width: number; height: number };
 
   fetchRevision: (endpoint: string, id?: string) => void;
@@ -77,10 +79,11 @@ export interface AppState {
   setFlowContents: (flow: FlowContents) => void;
   setFlowInfo: (info: FlowInfo) => void;
   setLanguageCode: (languageCode: string) => void;
-  setTestUpdate: () => void;
+  setDirtyDate: (date: Date) => void;
   expandCanvas: (width: number, height: number) => void;
 
   updateCanvasPositions: (positions: CanvasPositions) => void;
+  updateNodePosition(uuid: string, newPosition: FlowPosition): void;
   removeNodes: (uuids: string[]) => void;
 }
 
@@ -94,6 +97,13 @@ export const zustand = createStore<AppState>()(
       flowDefinition: null,
       flowInfo: null,
       isTranslating: false,
+      dirtyDate: null,
+
+      setDirtyDate: (date: Date) => {
+        set((state: AppState) => {
+          state.dirtyDate = date;
+        });
+      },
 
       fetchRevision: async (endpoint: string, id: string = null) => {
         if (!id) {
@@ -178,12 +188,6 @@ export const zustand = createStore<AppState>()(
         });
       },
 
-      setTestUpdate: () => {
-        set((state: AppState) => {
-          state.flowDefinition.name = 'Bloop!';
-        });
-      },
-
       expandCanvas: (width: number, height: number) => {
         set((state: AppState) => {
           const minWidth = Math.max(
@@ -211,6 +215,23 @@ export const zustand = createStore<AppState>()(
         });
       },
 
+      updateNodePosition: (uuid: string, newPosition: FlowPosition) => {
+        set((state: AppState) => {
+          if (state.flowDefinition._ui.nodes[uuid]) {
+            state.flowDefinition._ui.nodes[uuid].position = newPosition;
+          } else {
+            // If the node doesn't exist in _ui, we can add it
+            state.flowDefinition._ui.nodes[uuid] = {
+              position: newPosition,
+              type: null,
+              config: {}
+            };
+          }
+
+          state.dirtyDate = new Date();
+        });
+      },
+
       removeNodes: (uuids: string[]) => {
         set((state: AppState) => {
           for (const uuid of uuids) {

package/test/temba-chart.test.ts

@@ -146,6 +146,42 @@ describe('temba-chart', () => {
     expect(tickCallback.call({}, 604800, 9, [])).to.equal('7d'); // 1 week in seconds
     expect(tickCallback.call({}, 1209600, 10, [])).to.equal('14d'); // 2 weeks in seconds
   });
+
+  it('applies xFormat when xType is time', async () => {
+    const chart: TembaChart = await getChart({
+      xType: 'time',
+      xFormat: 'DD'
+    });
+
+    chart.data = sampleData;
+    await chart.updateComplete;
+
+    // Wait for the chart to be created after data is set
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(chart.chart).to.exist;
+    expect(chart.chart.options.scales.x.type).to.equal('time');
+    expect(
+      (chart.chart.options.scales.x as any).time.displayFormats.day
+    ).to.equal('DD');
+  });
+
+  it('does not include time config when xType is category', async () => {
+    const chart: TembaChart = await getChart({
+      xType: 'category',
+      xFormat: 'DD'
+    });
+
+    chart.data = sampleData;
+    await chart.updateComplete;
+
+    // Wait for the chart to be created after data is set
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(chart.chart).to.exist;
+    expect(chart.chart.options.scales.x.type).to.equal('category');
+    expect((chart.chart.options.scales.x as any).time).to.be.undefined;
+  });
 });
 
 describe('formatDurationFromSeconds', () => {