@nyaruka/temba-components 0.170.0 → 0.171.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.170.0",
+  "version": "0.171.0",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/flow/Editor.ts

@@ -58,6 +58,8 @@ import { Dialog } from '../layout/Dialog';
 import { CanvasMenu, CanvasMenuSelection } from './CanvasMenu';
 import { NodeTypeSelector, NodeTypeSelection } from './NodeTypeSelector';
 import { FlowSearch, SearchResult } from './FlowSearch';
+import { RealtimeSubscription, subscribeToFlow } from '../live/Realtime';
+import { FlowDependency } from './dependencies';
 
 export function findNodeForExit(
   definition: FlowDefinition,
@@ -105,6 +107,10 @@ const EMPTY_FLOW_ISSUES: FlowIssue[] = [];
 // Used in both the CSS animation and the JS setTimeout.
 const PENDING_SAVE_DELAY = 5000;
 
+// Shortest gap (in ms) between activity reads, however many changes the flow
+// socket announces in that window.
+const ACTIVITY_FETCH_INTERVAL = 3000;
+
 /**
  * Manages a timed "pending changes" card that lets users discard or auto-save
  * after a delay.  Used for both auto-layout and shift+drag copy.
@@ -200,8 +206,17 @@ export class Editor extends RapidElement {
   @property({ type: Array })
   public features: string[] = [];
 
-  private activityTimer: number | null = null;
-  private activityInterval = 100; // Start with 100ms interval for fast initial load
+  private activityWatch: RealtimeSubscription = null;
+  private watchedActivityFlow: string = null;
+  private activityFetchTimer: number | null = null;
+  private activityFetchInFlight = false;
+  private activityFetchQueued = false;
+  private activityFetchToken = 0;
+  private assetWatch: RealtimeSubscription = null;
+  private watchedAssetStore: Store = null;
+  private flowInfoWatch: () => void = null;
+  private assetResolveVersion = 0;
+  private watchedAssetSignature = '';
 
   @fromStore(zustand, (state: AppState) => state.flowDefinition)
   public definition!: FlowDefinition;
@@ -1198,10 +1213,17 @@ export class Editor extends RapidElement {
     this.zoomManager = new ZoomManager(this);
   }
 
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.syncAssetWatch(zustand.getState().flowInfo);
+    this.syncActivityWatch();
+  }
+
   protected firstUpdated(
     changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
     super.firstUpdated(changes);
+    this.syncAssetWatch(zustand.getState().flowInfo);
     this.plumber = new Plumber(this.querySelector('#canvas'), this);
     this.plumber.zoom = this.zoom;
     this.setupGlobalEventListeners();
@@ -1422,23 +1444,15 @@ export class Editor extends RapidElement {
       // defer to avoid triggering a reactive canvasSize update during this cycle
       setTimeout(() => this.updateCanvasSize(), 0);
 
-      // Start fetching activity data when definition is loaded
-      if (this.definition?.uuid) {
-        this.startActivityFetching();
-      }
+      this.syncActivityWatch();
     }
 
     if (changes.has('simulatorActive')) {
       if (this.simulatorActive) {
         // Close any open floating windows when simulator opens
         this.closeFloatingWindows();
-        // Stop polling when simulator becomes active
-        this.stopActivityFetching();
-      } else {
-        // Resume polling and refresh activity when simulator closes
-        this.activityInterval = 100; // Reset to fast initial interval
-        this.startActivityFetching();
       }
+      this.syncActivityWatch();
     }
 
     if (changes.has('activityData')) {
@@ -1653,55 +1667,188 @@ export class Editor extends RapidElement {
     });
   }
 
-  private startActivityFetching(): void {
-    // Don't start if simulator is active
-    if (this.simulatorActive) {
+  private syncActivityWatch(): void {
+    const flow = this.simulatorActive ? null : this.definition?.uuid;
+    if (this.activityWatch && flow === this.watchedActivityFlow) {
+      return;
+    }
+
+    if (this.activityWatch) {
+      this.activityWatch.unsubscribe();
+      this.activityWatch = null;
+    }
+    this.clearActivityFetch();
+    this.watchedActivityFlow = flow;
+    if (!flow) {
       return;
     }
-    // Fetch immediately
-    this.fetchActivityData();
+
+    this.activityWatch = subscribeToFlow(
+      flow,
+      (event) => {
+        if (event?.type === 'activity') {
+          this.scheduleActivityFetch(flow);
+        }
+      },
+      // fires on every (re)subscribe, so catch up on anything published while
+      // we were disconnected
+      () => this.scheduleActivityFetch(flow)
+    );
+
+    // the socket only tells us about *changes*, and it may never connect at
+    // all, so the first read doesn't wait on it
+    this.fetchActivityData(flow);
   }
 
-  private stopActivityFetching(): void {
-    if (this.activityTimer !== null) {
-      clearTimeout(this.activityTimer);
-      this.activityTimer = null;
+  /**
+   * Abandons any scheduled or in-flight read. The token makes the in-flight
+   * one a no-op when it lands, so a read for the flow we've stopped watching
+   * can neither hold up nor swallow the next flow's first read.
+   */
+  private clearActivityFetch(): void {
+    if (this.activityFetchTimer !== null) {
+      clearTimeout(this.activityFetchTimer);
+      this.activityFetchTimer = null;
     }
+    this.activityFetchQueued = false;
+    this.activityFetchInFlight = false;
+    this.activityFetchToken++;
   }
 
-  private fetchActivityData(): void {
-    if (!this.definition?.uuid) {
+  /**
+   * Coalesces activity publications into at most one request per window.
+   * Mailroom publishes once per committed sprint batch, so a flow running
+   * against a large group can otherwise announce many changes a second.
+   */
+  private scheduleActivityFetch(flow: string): void {
+    if (flow !== this.watchedActivityFlow || this.activityFetchTimer !== null) {
       return;
     }
+    this.activityFetchTimer = window.setTimeout(() => {
+      this.activityFetchTimer = null;
+      this.fetchActivityData(flow);
+    }, ACTIVITY_FETCH_INTERVAL);
+  }
 
-    // Don't fetch if simulator is active
-    if (this.simulatorActive) {
+  private fetchActivityData(flow: string): void {
+    if (
+      !this.isConnected ||
+      this.simulatorActive ||
+      flow !== this.watchedActivityFlow
+    ) {
       return;
     }
 
-    const activityEndpoint = `/flow/activity/${this.definition.uuid}/`;
     const store = getStore();
     if (!store) {
       return;
     }
-    const state = store.getState();
-    state.fetchActivity(activityEndpoint).then(() => {
-      // Guard against responses arriving after the editor is disconnected
-      if (!this.isConnected) {
+
+    // one request at a time, so responses can't land out of order and a burst
+    // of publications collapses into a single follow-up read
+    if (this.activityFetchInFlight) {
+      this.activityFetchQueued = true;
+      return;
+    }
+    this.activityFetchInFlight = true;
+    const token = ++this.activityFetchToken;
+    const done = () => {
+      // a flow change (or teardown) since this read started has already
+      // reset the bookkeeping for the flow we now care about
+      if (token !== this.activityFetchToken) {
         return;
       }
+      this.activityFetchInFlight = false;
+      if (this.activityFetchQueued) {
+        this.activityFetchQueued = false;
+        this.scheduleActivityFetch(flow);
+      }
+    };
+    Promise.resolve(
+      store.getState().fetchActivity(`/flow/activity/${flow}/`)
+    ).then(done, done);
+  }
+
+  private syncAssetNames(): void {
+    const store = getStore();
+    const state = zustand.getState();
+    if (!store || !state.flowDefinition || !state.flowInfo) {
+      return;
+    }
 
-      // Schedule next fetch with exponential backoff (max 5 minutes)
-      this.activityInterval = Math.min(60000 * 5, this.activityInterval + 100);
+    const canonical: FlowDependency[] = [];
+    for (const dependency of state.flowInfo.dependencies || []) {
+      const identity = dependency.uuid || dependency.key;
+      if (!identity) {
+        continue;
+      }
+      const asset = store.getAsset(dependency.type, identity);
+      if (asset) {
+        canonical.push({ ...dependency, name: asset.name });
+      }
+    }
+    state.updateDependencyNames(canonical);
+  }
 
-      if (this.activityTimer !== null) {
-        clearTimeout(this.activityTimer);
+  private async resolveAssetNames(info: AppState['flowInfo']): Promise<void> {
+    const store = getStore();
+    if (!store || !info) {
+      return;
+    }
+    const version = ++this.assetResolveVersion;
+    try {
+      const canonical = await store.resolveAssets(info.dependencies || []);
+      if (version === this.assetResolveVersion && this.isConnected) {
+        zustand.getState().updateDependencyNames(canonical);
       }
+    } catch (error) {
+      console.error('failed to resolve flow dependency assets', error);
+    }
+  }
 
-      this.activityTimer = window.setTimeout(() => {
-        this.fetchActivityData();
-      }, this.activityInterval);
-    });
+  private syncAssetWatch(info: AppState['flowInfo']): void {
+    if (!this.isConnected) {
+      return;
+    }
+    const store = getStore();
+    if (!store) {
+      return;
+    }
+    const interests = info?.dependencies || [];
+    const signature = interests
+      .map(
+        (dependency) =>
+          `${dependency.type}:${dependency.uuid || dependency.key || ''}`
+      )
+      .sort()
+      .join('|');
+    // the store is part of the key: a replaced <temba-store> leaves us
+    // watching a dead one otherwise
+    if (
+      this.assetWatch &&
+      store === this.watchedAssetStore &&
+      signature === this.watchedAssetSignature
+    ) {
+      return;
+    }
+    if (this.assetWatch) {
+      this.assetWatch.unsubscribe();
+    }
+    this.watchedAssetStore = store;
+    this.watchedAssetSignature = signature;
+    // the store caches the changed asset before publishing, so applying
+    // everything it has covers both a single change and a reconnect refresh
+    this.assetWatch = store.watchAssets(interests, () => this.syncAssetNames());
+    if (!this.flowInfoWatch) {
+      this.flowInfoWatch = zustand.subscribe(
+        (state) => state.flowInfo,
+        (info) => {
+          this.syncAssetWatch(info);
+          this.resolveAssetNames(info);
+        }
+      );
+      this.resolveAssetNames(zustand.getState().flowInfo);
+    }
   }
 
   private handleLanguageChange(languageCode: string): void {
@@ -1957,6 +2104,23 @@ export class Editor extends RapidElement {
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
+    if (this.assetWatch) {
+      this.assetWatch.unsubscribe();
+      this.assetWatch = null;
+    }
+    if (this.activityWatch) {
+      this.activityWatch.unsubscribe();
+      this.activityWatch = null;
+    }
+    this.clearActivityFetch();
+    this.watchedActivityFlow = null;
+    this.watchedAssetStore = null;
+    this.watchedAssetSignature = '';
+    if (this.flowInfoWatch) {
+      this.flowInfoWatch();
+      this.flowInfoWatch = null;
+    }
+    this.assetResolveVersion++;
     this.zoomManager.teardownLoupe();
     getStore()?.getState().setFlushSave(null);
     this.dragManager.teardownListeners();
@@ -1969,10 +2133,6 @@ export class Editor extends RapidElement {
       clearTimeout(this.saveTimer);
       this.saveTimer = null;
     }
-    if (this.activityTimer !== null) {
-      clearTimeout(this.activityTimer);
-      this.activityTimer = null;
-    }
     this.pendingTimer.clearTimer();
     window.removeEventListener('resize', this.boundWindowResize);
 

package/src/flow/dependencies.ts

@@ -0,0 +1,115 @@
+import { produce } from 'immer';
+import { FlowDefinition } from '../store/flow-definition';
+import { normalizeUuid } from '../store/identity';
+
+export interface FlowDependency {
+  type: string;
+  name: string;
+  uuid?: string;
+  key?: string;
+  missing?: boolean;
+}
+
+const dependencyIdentity = (dependency: FlowDependency): string | null => {
+  const identity = dependency.uuid || dependency.key;
+  return identity ? `${dependency.type}:${identity}` : null;
+};
+
+/**
+ * Returns a definition whose embedded reference names have been replaced by
+ * the canonical dependency names supplied by the server. References with a
+ * UUID are safe to recognize anywhere in the definition because flow-owned
+ * UUIDs don't appear in its dependency list. Field references use keys and
+ * only occur under a `field` property; scoping keyed matching there avoids
+ * confusing a field key with a result name or another keyed structure.
+ */
+export const resolveDependencyNames = (
+  definition: FlowDefinition,
+  dependencies: FlowDependency[] = []
+): FlowDefinition => {
+  if (!definition || dependencies.length === 0) {
+    return definition;
+  }
+
+  const namesByUuid = new Map<string, string>();
+  const fieldNamesByKey = new Map<string, string>();
+  for (const dependency of dependencies) {
+    if (dependency.uuid && dependency.name != null) {
+      // normalized on both set and lookup so a reference embedded in the
+      // definition in a non-canonical form still matches, the same way the
+      // store's asset cache resolves it
+      namesByUuid.set(normalizeUuid(dependency.uuid), dependency.name);
+    } else if (
+      dependency.type === 'field' &&
+      dependency.key &&
+      dependency.name != null
+    ) {
+      fieldNamesByKey.set(dependency.key, dependency.name);
+    }
+  }
+
+  return produce(definition, (draft: any) => {
+    const visit = (value: any, propertyName?: string) => {
+      if (!value || typeof value !== 'object') {
+        return;
+      }
+      if (Array.isArray(value)) {
+        // keep the owning property name so `field` scoping still applies to
+        // references nested in an array
+        value.forEach((item) => visit(item, propertyName));
+        return;
+      }
+
+      if (typeof value.uuid === 'string' && 'name' in value) {
+        const canonical = namesByUuid.get(normalizeUuid(value.uuid));
+        if (canonical != null) {
+          value.name = canonical;
+        }
+      } else if (
+        propertyName === 'field' &&
+        typeof value.key === 'string' &&
+        'name' in value
+      ) {
+        const canonical = fieldNamesByKey.get(value.key);
+        if (canonical != null) {
+          value.name = canonical;
+        }
+      }
+
+      for (const [key, child] of Object.entries(value)) {
+        visit(child, key);
+      }
+    };
+
+    visit(draft);
+  });
+};
+
+/**
+ * Replaces every matching dependency whose canonical name has changed. Assets
+ * the loaded flow isn't interested in are ignored.
+ */
+export const replaceDependencies = (
+  dependencies: FlowDependency[] = [],
+  changed: FlowDependency[]
+): FlowDependency[] | null => {
+  const changedByIdentity = new Map<string, FlowDependency>();
+  for (const dependency of changed) {
+    const identity = dependencyIdentity(dependency);
+    if (identity) {
+      changedByIdentity.set(identity, dependency);
+    }
+  }
+
+  let replaced = false;
+  const updated = dependencies.map((dependency) => {
+    const identity = dependencyIdentity(dependency);
+    const replacement = identity ? changedByIdentity.get(identity) : null;
+    if (!replacement || replacement.name === dependency.name) {
+      return dependency;
+    }
+    replaced = true;
+    return { ...dependency, name: replacement.name };
+  });
+  return replaced ? updated : null;
+};