@miso.ai/client-sdk-ui 1.10.2-beta.1 → 1.10.2-beta.3

package/dist/cjs/actor/fields.js

@@ -14,6 +14,7 @@ exports.request = request;
 exports.response = response;
 exports.session = session;
 exports.suggestions = suggestions;
+exports.tracker = tracker;
 exports.view = view;
 function session() {
   return 'session';
@@ -39,6 +40,9 @@ function view(role) {
 function event() {
   return 'event';
 }
+function tracker() {
+  return 'tracker';
+}
 function interaction() {
   return 'interaction';
 }

package/dist/cjs/actor/tracker.js

@@ -12,41 +12,57 @@ var _utils = require("./utils.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const VALUELESS_ITEMS = [Symbol('valueless')];
 class Tracker {
-  constructor(view) {
-    this._view = view;
-    this._role = view.role;
+  constructor(_ref) {
+    let {
+      hub,
+      role,
+      valueless = false,
+      options
+    } = _ref;
+    this._hub = hub;
+    this._role = role;
+    this._valueless = !!valueless;
+    this._options = options;
     // TODO: know item type
 
     this._states = new _states.default(this._getSessionId());
   }
   get options() {
-    return this._view._getTrackerOptions();
+    return typeof this._options === 'function' ? this._options() : this._options;
   }
   getState(item) {
     return this._states.getFullState(item);
   }
   _trigger(type, items) {
     let meta = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    if (this._valueless) {
+      meta = items;
+      items = VALUELESS_ITEMS;
+    }
     (0, _constants.validateEventType)(type);
     this._syncSession();
-    items = this._states.untriggered((0, _commons.asArray)(items), type);
-    if (items.length === 0) {
-      return;
+    if (type !== _constants.EVENT_TYPE.SUBMIT) {
+      items = this._states.untriggered((0, _commons.asArray)(items), type);
+      if (items.length === 0) {
+        return;
+      }
+      this._states.set(items, type, _constants.TRACKING_STATUS.TRIGGERED);
     }
-    this._states.set(items, type, _constants.TRACKING_STATUS.TRIGGERED);
     const property = this._role === 'results' ? 'products' : this._role; // TODO: ad-hoc, see #83
     const misoId = this._getMisoId();
     const request = this._getRequestPayload();
+    const values = this._valueless ? undefined : items;
 
     // TODO: should trigger 'tracker' and let workflow translate to interactions
-    this._view.hub.trigger(fields.interaction(), (0, _utils.toInteraction)({
+    this._hub.trigger(fields.interaction(), (0, _utils.toInteraction)({
       property,
       misoId,
       request
     }, {
       event: type,
-      values: items,
+      values,
       meta
     }));
   }
@@ -76,7 +92,7 @@ class Tracker {
     return request && request.payload;
   }
   _getViewState() {
-    return this._view.hub.states[fields.view(this._role)];
+    return this._hub.states[fields.view(this._role)];
   }
 }
 exports.default = Tracker;

package/dist/cjs/actor/utils.js

@@ -34,10 +34,13 @@ function toInteraction(_ref, _ref2) {
   // TODO: ad-hoc
   const question_source = request && request._meta && request._meta.question_source;
   const isProductType = isProduct(property);
-  const product_ids = isProductType ? values.map(v => typeof v === 'string' ? v : v.product_id).filter(v => v) : [];
-  const items = isProductType ? undefined : values.map(v => v.text || v.id || v);
-  const channel = property === _constants.ROLE.AFFILIATION ? values[0] && values[0].channel : undefined;
-  const positions = property === _constants.ROLE.AFFILIATION ? values.map(v => v.position) : undefined;
+  const isSubmit = event === _constants.EVENT_TYPE.SUBMIT;
+  const isAffiliation = property === _constants.ROLE.AFFILIATION;
+  const product_ids = isProductType && values ? values.map(v => typeof v === 'string' ? v : v.product_id).filter(v => v) : !isSubmit ? [] : undefined;
+  const items = !isProductType && !isSubmit && values ? values.map(v => v.text || v.id || v) : undefined;
+  const value = isSubmit ? values : undefined;
+  const channel = isAffiliation ? values[0] && values[0].channel : undefined;
+  const positions = isAffiliation ? values.map(v => v.position) : undefined;
   const payload = (0, _commons.trimObj)({
     type: event === 'viewable' ? 'viewable_impression' : event,
     product_ids,
@@ -48,6 +51,7 @@ function toInteraction(_ref, _ref2) {
         property,
         channel,
         items,
+        value,
         positions,
         trigger: manual ? 'manual' : 'auto',
         question_source

package/dist/cjs/actor/view.js

@@ -79,9 +79,12 @@ class ViewActor {
     this._layout = layout;
 
     // initialize new layout
-    // don't use _safeApplyOnLayout, for any error should be thrown
-    if (layout && typeof layout.initialize === 'function') {
-      layout.initialize(this);
+    if (layout) {
+      layout._view = this;
+      // don't use _safeApplyOnLayout, for any error should be thrown
+      if (typeof layout.initialize === 'function') {
+        layout.initialize(this);
+      }
     }
 
     // in case the data is already there
@@ -90,8 +93,21 @@ class ViewActor {
     });
   }
   get tracker() {
+    const {
+      role
+    } = this;
+    if (role === _constants.ROLE.CONTAINER) {
+      return this._views._getContainerTracker();
+    }
     if (!this._tracker) {
-      this._tracker = new _tracker.default(this);
+      const {
+        hub
+      } = this;
+      this._tracker = new _tracker.default({
+        hub,
+        role,
+        options: () => this._getTrackerOptions()
+      });
     }
     return this._tracker;
   }

package/dist/cjs/actor/views.js

@@ -8,6 +8,7 @@ var _commons = require("@miso.ai/commons");
 var _constants = require("../constants.js");
 var fields = _interopRequireWildcard(require("./fields.js"));
 var _view = _interopRequireDefault(require("./view.js"));
+var _tracker = _interopRequireDefault(require("./tracker.js"));
 var _trackers = require("../util/trackers.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -27,6 +28,7 @@ class ViewsActor {
     this._layoutFactory = layouts;
     this._options = options;
     this._containers = new Map();
+    this._containerTracker = undefined;
     this._views = {};
     this._trackers = new Trackers(this, roles);
     for (const role of roles) {
@@ -202,6 +204,19 @@ class ViewsActor {
   _getTrackerOptions(role) {
     return (0, _trackers.normalizeTrackerOptions)(this._trackerOptions && this._trackerOptions[role] || false);
   }
+  _getContainerTracker() {
+    if (!this._containerTracker) {
+      const hub = this._hub;
+      const role = _constants.ROLE.CONTAINER;
+      this._containerTracker = new _tracker.default({
+        hub,
+        role,
+        valueless: true,
+        options: () => this._getTrackerOptions(role)
+      });
+    }
+    return this._containerTracker;
+  }
   _error(e) {
     // TODO: hub trigger error event
     console.error(e);
@@ -242,5 +257,8 @@ class Trackers {
         get: () => views.get(role).tracker
       });
     }
+    Object.defineProperty(this, _constants.ROLE.CONTAINER, {
+      get: () => views._getContainerTracker()
+    });
   }
 }

package/dist/cjs/constants.js

@@ -47,9 +47,10 @@ const LAYOUT_CATEGORY = exports.LAYOUT_CATEGORY = Object.freeze({
 const EVENT_TYPE = exports.EVENT_TYPE = Object.freeze({
   IMPRESSION: 'impression',
   VIEWABLE: 'viewable',
-  CLICK: 'click'
+  CLICK: 'click',
+  SUBMIT: 'submit'
 });
-const TRACKING_EVENT_TYPES = exports.TRACKING_EVENT_TYPES = [EVENT_TYPE.IMPRESSION, EVENT_TYPE.VIEWABLE, EVENT_TYPE.CLICK];
+const TRACKING_EVENT_TYPES = exports.TRACKING_EVENT_TYPES = [EVENT_TYPE.IMPRESSION, EVENT_TYPE.VIEWABLE, EVENT_TYPE.CLICK, EVENT_TYPE.SUBMIT];
 const TRACKING_STATUS = exports.TRACKING_STATUS = Object.freeze({
   UNTRACKED: 'untracked',
   TRACKING: 'tracking',

package/dist/cjs/layout/container/container.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _constants = require("../../constants.js");
 var _raf = _interopRequireDefault(require("../raf.js"));
 var _misoBanner = _interopRequireDefault(require("../../element/miso-banner.js"));
+var _viewables = _interopRequireDefault(require("../../util/viewables.js"));
 const _excluded = ["logo"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
@@ -27,15 +28,19 @@ class ContainerLayout extends _raf.default {
     super(Object.assign({
       logo
     }, options));
+    this._impression = false;
+    this._viewables = new _viewables.default();
   }
-  _render(element, _ref2) {
-    let {
-      state
-    } = _ref2;
+  _syncElement(element) {
+    if (this._element !== element) {
+      this._viewables.untrack(this._element);
+    }
+    super._syncElement(element);
+  }
+  _render(element, states) {
     this._syncBanner(element);
-    this._syncStatus(element, {
-      state
-    });
+    this._syncStatus(element, states);
+    this._trackInteractions(element, states);
   }
   _syncBanner(element) {
     const bannerTagName = _misoBanner.default.tagName;
@@ -56,17 +61,17 @@ class ContainerLayout extends _raf.default {
     } = element;
     const logo = localLogo !== undefined && localLogo !== 'auto' ? localLogo : globalLogo;
     // logo === 'auto': only add banner when a component of main role (like producs, answer) is present
-    return logo === 'auto' ? element.components.some(_ref3 => {
+    return logo === 'auto' ? element.components.some(_ref2 => {
       let {
         role
-      } = _ref3;
+      } = _ref2;
       return isMainRole(role);
     }) : !!logo;
   }
-  _syncStatus(element, _ref4) {
+  _syncStatus(element, _ref3) {
     let {
       state
-    } = _ref4;
+    } = _ref3;
     if (!element) {
       return;
     }
@@ -89,6 +94,42 @@ class ContainerLayout extends _raf.default {
       element.removeAttribute('miso-id');
     }
   }
+  _trackInteractions(element, _ref4) {
+    let {
+      state
+    } = _ref4;
+    const {
+      status
+    } = state;
+    if (status === _constants.STATUS.READY) {
+      this._trackImpression();
+      this._trackViewable(element); // don't await
+    }
+  }
+  _trackImpression() {
+    const {
+      impression: options
+    } = this._view.tracker.options || {};
+    if (!options) {
+      return;
+    }
+    if (this._impression) {
+      return;
+    }
+    this._impression = true;
+    this._view.tracker.impression();
+  }
+  async _trackViewable(element) {
+    const {
+      viewable: options
+    } = this._view.tracker.options || {};
+    if (!options) {
+      return;
+    }
+    if (await this._viewables.track(element, options)) {
+      this._view.tracker.viewable();
+    }
+  }
 }
 exports.default = ContainerLayout;
 function isMainRole(role) {

package/dist/cjs/layout/input/option-list.js

@@ -80,7 +80,6 @@ class OptionListLayout extends _template.default {
     this._initTrackable();
   }
   initialize(view) {
-    this._view = view;
     const {
       proxyElement,
       hub

package/dist/cjs/layout/input/search-box.js

@@ -158,7 +158,6 @@ class SearchBoxLayout extends _template.default {
     this._debounce = (0, _commons.debounce)(this.autocomplete.debounce);
   }
   initialize(view) {
-    this._view = view;
     const {
       proxyElement,
       hub
@@ -378,6 +377,16 @@ class SearchBoxLayout extends _template.default {
     this._view.hub.trigger(_index.fields.query(), {
       q: value
     });
+    this._trackSubmit(value);
+  }
+  _trackSubmit(value) {
+    const {
+      [_constants.EVENT_TYPE.SUBMIT]: options
+    } = this._view.tracker.options || {};
+    if (!options) {
+      return;
+    }
+    this._view.tracker.submit(value);
   }
 }
 exports.default = SearchBoxLayout;

package/dist/cjs/layout/list/collection.js

@@ -115,11 +115,9 @@ class CollectionLayout extends _template.default {
       templates: Object.assign({}, DEFAULT_TEMPLATES, templates),
       itemType
     }, options));
-    this._view = undefined;
     this._initTrackable();
   }
   initialize(view) {
-    this._view = view;
     this._unsubscribes.push(view.proxyElement.on('click', this._onClick.bind(this)));
   }
   _preprocess(_ref2) {

package/dist/cjs/layout/radio/radio.js

@@ -65,7 +65,7 @@ class RadioLayout extends _template.default {
   initialize(view) {
     const {
       proxyElement
-    } = this._view = view;
+    } = view;
     this._unsubscribes = [...this._unsubscribes, view.hub.on(this._field, () => this._refresh()), proxyElement.on('click', e => this._handleClick(e))];
     this._defaultValue ? this._select(this._defaultValue) : this._clear();
   }

package/dist/cjs/layout/text/typewriter/index.js

@@ -56,8 +56,7 @@ class TypewriterLayout extends _progressive.default {
       TypewriterLayout.MisoClient.plugins.install('std:ui-markdown');
     }
   }
-  initialize(view) {
-    this._view = view;
+  initialize() {
     this._setup();
   }
 

package/dist/cjs/layout/trackable.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TrackableMixin = void 0;
 exports.makeTrackable = makeTrackable;
-var _constants = require("../constants.js");
 var _bindings = _interopRequireDefault(require("../util/bindings.js"));
 var _viewables = _interopRequireDefault(require("../util/viewables.js"));
 var _trackers = require("../util/trackers.js");

package/dist/cjs/version.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = '1.10.2-beta.1';
+var _default = exports.default = '1.10.2-beta.3';

package/dist/cjs/workflow/base.js

@@ -36,6 +36,9 @@ function mergeDefaults(workflow) {
     interactions: (0, _options.mergeInteractionsOptions)(DEFAULT_INTERACTIONS, interactions)
   });
 }
+function getRevision(data) {
+  return data && data.value && data.value.revision;
+}
 class Workflow extends _commons.Component {
   constructor(_ref2) {
     var _this;
@@ -129,6 +132,15 @@ class Workflow extends _commons.Component {
     if (session.uuid !== this.session.uuid) {
       return; // ignore data for old session or inactive session
     }
+
+    // compare revision to omit outdated data, if any
+    const revision = getRevision(data);
+    if (!(0, _commons.isNullLike)(revision)) {
+      const currentRevision = getRevision(this._hub.states[_index.fields.data()]);
+      if (!(0, _commons.isNullLike)(currentRevision) && revision <= currentRevision) {
+        return;
+      }
+    }
     this._sessions.start(); // in case session not started yet
 
     data = this._defaultProcessData(data);

package/dist/cjs/workflow/explore.js

@@ -29,7 +29,11 @@ const DEFAULT_LAYOUTS = Object.freeze({
   }]
 });
 const DEFAULT_TRACKERS = Object.freeze({
-  [_constants.ROLE.RELATED_QUESTIONS]: {}
+  [_constants.ROLE.RELATED_QUESTIONS]: {},
+  [_constants.ROLE.CONTAINER]: {},
+  [_constants.ROLE.QUERY]: {
+    [_constants.EVENT_TYPE.SUBMIT]: {}
+  }
 });
 const DEFAULT_OPTIONS = Object.freeze({
   api: DEFAULT_API_OPTIONS,

package/package.json

@@ -26,7 +26,7 @@
     "url": "https://github.com/MisoAI/miso-client-js-sdk/issues"
   },
   "dependencies": {
-    "@miso.ai/commons": "1.10.2-beta.1"
+    "@miso.ai/commons": "1.10.2-beta.3"
   },
-  "version": "1.10.2-beta.1"
+  "version": "1.10.2-beta.3"
 }

package/src/actor/fields.js

@@ -30,6 +30,10 @@ export function event() {
   return 'event';
 }
 
+export function tracker() {
+  return 'tracker';
+}
+
 export function interaction() {
   return 'interaction';
 }

package/src/actor/tracker.js

@@ -1,21 +1,25 @@
 import { asArray } from '@miso.ai/commons';
-import { TRACKING_EVENT_TYPES, TRACKING_STATUS, validateEventType } from '../constants.js';
+import { TRACKING_EVENT_TYPES, TRACKING_STATUS, EVENT_TYPE, validateEventType } from '../constants.js';
 import * as fields from './fields.js';
 import States from '../util/states.js';
 import { toInteraction } from './utils.js';
 
+const VALUELESS_ITEMS = [Symbol('valueless')];
+
 export default class Tracker {
 
-  constructor(view) {
-    this._view = view;
-    this._role = view.role;
+  constructor({ hub, role, valueless = false, options }) {
+    this._hub = hub;
+    this._role = role;
+    this._valueless = !!valueless;
+    this._options = options;
     // TODO: know item type
 
     this._states = new States(this._getSessionId());
   }
 
   get options() {
-    return this._view._getTrackerOptions();
+    return typeof this._options === 'function' ? this._options() : this._options;
   }
 
   getState(item) {
@@ -23,21 +27,28 @@ export default class Tracker {
   }
 
   _trigger(type, items, meta = {}) {
+    if (this._valueless) {
+      meta = items;
+      items = VALUELESS_ITEMS;
+    }
     validateEventType(type);
     this._syncSession();
 
-    items = this._states.untriggered(asArray(items), type);
-    if (items.length === 0) {
-      return;
+    if (type !== EVENT_TYPE.SUBMIT) {
+      items = this._states.untriggered(asArray(items), type);
+      if (items.length === 0) {
+        return;
+      }
+      this._states.set(items, type, TRACKING_STATUS.TRIGGERED);
     }
-    this._states.set(items, type, TRACKING_STATUS.TRIGGERED);
 
     const property = this._role === 'results' ? 'products' : this._role; // TODO: ad-hoc, see #83
     const misoId = this._getMisoId();
     const request = this._getRequestPayload();
+    const values = this._valueless ? undefined : items;
 
     // TODO: should trigger 'tracker' and let workflow translate to interactions
-    this._view.hub.trigger(fields.interaction(), toInteraction({ property, misoId, request }, { event: type, values: items, meta }));
+    this._hub.trigger(fields.interaction(), toInteraction({ property, misoId, request }, { event: type, values, meta }));
   }
 
   _syncSession() {
@@ -66,7 +77,7 @@ export default class Tracker {
   }
 
   _getViewState() {
-    return this._view.hub.states[fields.view(this._role)];
+    return this._hub.states[fields.view(this._role)];
   }
 
 }

package/src/actor/utils.js

@@ -1,5 +1,5 @@
 import { trimObj, uuidToTimestamp } from '@miso.ai/commons';
-import { ROLE } from '../constants.js';
+import { ROLE, EVENT_TYPE } from '../constants.js';
 
 const PRODUCT_TYPED_PROPERTIES = new Set([
   ROLE.PRODUCTS,
@@ -22,10 +22,16 @@ export function toInteraction({ property, misoId, request }, { event, values, ma
   // TODO: ad-hoc
   const question_source = request && request._meta && request._meta.question_source;
   const isProductType = isProduct(property);
-  const product_ids = isProductType ? values.map(v => typeof v === 'string' ? v : v.product_id).filter(v => v) : [];
-  const items = isProductType ? undefined : values.map(v => v.text || v.id || v);
-  const channel = property === ROLE.AFFILIATION ? values[0] && values[0].channel : undefined;
-  const positions = property === ROLE.AFFILIATION ? values.map(v => v.position) : undefined;
+  const isSubmit = event === EVENT_TYPE.SUBMIT;
+  const isAffiliation = property === ROLE.AFFILIATION;
+
+  const product_ids = isProductType && values ? values.map(v => typeof v === 'string' ? v : v.product_id).filter(v => v) : !isSubmit ? [] : undefined;
+  const items = !isProductType && !isSubmit && values ? values.map(v => v.text || v.id || v) : undefined;
+  const value = isSubmit ? values : undefined;
+
+  const channel = isAffiliation ? values[0] && values[0].channel : undefined;
+  const positions = isAffiliation ? values.map(v => v.position) : undefined;
+
   const payload = trimObj({
     type: event === 'viewable' ? 'viewable_impression' : event,
     product_ids,
@@ -36,6 +42,7 @@ export function toInteraction({ property, misoId, request }, { event, values, ma
         property,
         channel,
         items,
+        value,
         positions,
         trigger: manual ? 'manual' : 'auto',
         question_source,

package/src/actor/view.js

@@ -77,9 +77,12 @@ export default class ViewActor {
     this._layout = layout;
 
     // initialize new layout
-    // don't use _safeApplyOnLayout, for any error should be thrown
-    if (layout && typeof layout.initialize === 'function') {
-      layout.initialize(this);
+    if (layout) {
+      layout._view = this;
+      // don't use _safeApplyOnLayout, for any error should be thrown
+      if (typeof layout.initialize === 'function') {
+        layout.initialize(this);
+      }
     }
 
     // in case the data is already there
@@ -87,8 +90,13 @@ export default class ViewActor {
   }
 
   get tracker() {
+    const { role } = this;
+    if (role === ROLE.CONTAINER) {
+      return this._views._getContainerTracker();
+    }
     if (!this._tracker) {
-      this._tracker = new Tracker(this);
+      const { hub } = this;
+      this._tracker = new Tracker({ hub, role, options: () => this._getTrackerOptions() });
     }
     return this._tracker;
   }

package/src/actor/views.js

@@ -2,6 +2,7 @@ import { defineValues, delegateGetters } from '@miso.ai/commons';
 import { STATUS, ROLE } from '../constants.js';
 import * as fields from './fields.js';
 import ViewActor from './view.js';
+import Tracker from './tracker.js';
 import { normalizeTrackerOptions } from '../util/trackers.js';
 
 export default class ViewsActor {
@@ -19,6 +20,7 @@ export default class ViewsActor {
     this._layoutFactory = layouts;
     this._options = options;
     this._containers = new Map();
+    this._containerTracker = undefined;
     this._views = {};
     this._trackers = new Trackers(this, roles);
 
@@ -201,6 +203,15 @@ export default class ViewsActor {
     return normalizeTrackerOptions((this._trackerOptions && this._trackerOptions[role]) || false);
   }
 
+  _getContainerTracker() {
+    if (!this._containerTracker) {
+      const hub = this._hub;
+      const role = ROLE.CONTAINER;
+      this._containerTracker = new Tracker({ hub, role, valueless: true, options: () => this._getTrackerOptions(role) });
+    }
+    return this._containerTracker;
+  }
+
   _error(e) {
     // TODO: hub trigger error event
     console.error(e);
@@ -246,6 +257,9 @@ class Trackers {
         get: () => views.get(role).tracker,
       });
     }
+    Object.defineProperty(this, ROLE.CONTAINER, {
+      get: () => views._getContainerTracker(),
+    });
   }
 
 }

package/src/constants.js

@@ -57,12 +57,14 @@ export const EVENT_TYPE = Object.freeze({
   IMPRESSION: 'impression',
   VIEWABLE: 'viewable',
   CLICK: 'click',
+  SUBMIT: 'submit',
 });
 
 export const TRACKING_EVENT_TYPES = [
   EVENT_TYPE.IMPRESSION,
   EVENT_TYPE.VIEWABLE,
   EVENT_TYPE.CLICK,
+  EVENT_TYPE.SUBMIT,
 ];
 
 export const TRACKING_STATUS = Object.freeze({

package/src/layout/container/container.js

@@ -1,6 +1,7 @@
 import { ROLE, STATUS, LAYOUT_CATEGORY } from '../../constants.js';
 import RafLayout from '../raf.js';
 import MisoBannerElement from '../../element/miso-banner.js';
+import Viewables from '../../util/viewables.js';
 
 const TYPE = 'container';
 
@@ -19,11 +20,21 @@ export default class ContainerLayout extends RafLayout {
       logo,
       ...options,
     });
+    this._impression = false;
+    this._viewables = new Viewables();
   }
 
-  _render(element, { state }) {
+  _syncElement(element) {
+    if (this._element !== element) {
+      this._viewables.untrack(this._element);
+    }
+    super._syncElement(element);
+  }
+
+  _render(element, states) {
     this._syncBanner(element);
-    this._syncStatus(element, { state });
+    this._syncStatus(element, states);
+    this._trackInteractions(element, states);
   }
 
   _syncBanner(element) {
@@ -62,6 +73,36 @@ export default class ContainerLayout extends RafLayout {
     }
   }
 
+  _trackInteractions(element, { state }) {
+    const { status } = state;
+    if (status === STATUS.READY) {
+      this._trackImpression();
+      this._trackViewable(element); // don't await
+    }
+  }
+
+  _trackImpression() {
+    const { impression: options } = this._view.tracker.options || {};
+    if (!options) {
+      return;
+    }
+    if (this._impression) {
+      return;
+    }
+    this._impression = true;
+    this._view.tracker.impression();
+  }
+
+  async _trackViewable(element) {
+    const { viewable: options } = this._view.tracker.options || {};
+    if (!options) {
+      return;
+    }
+    if (await this._viewables.track(element, options)) {
+      this._view.tracker.viewable();
+    }
+  }
+
 }
 
 function isMainRole(role) {

package/src/layout/input/option-list.js

@@ -67,7 +67,6 @@ export default class OptionListLayout extends TemplateBasedLayout {
   }
 
   initialize(view) {
-    this._view = view;
     const { proxyElement, hub } = view;
     this._unsubscribes = [
       ...this._unsubscribes,

package/src/layout/input/search-box.js

@@ -1,5 +1,5 @@
 import { defineValues, escapeHtml, findInAncestors, debounce } from '@miso.ai/commons';
-import { LAYOUT_CATEGORY, STATUS } from '../../constants.js';
+import { LAYOUT_CATEGORY, STATUS, EVENT_TYPE } from '../../constants.js';
 import { fields } from '../../actor/index.js';
 import TemplateBasedLayout from '../template.js';
 import { helpers, imageBlock, productInfoBlock } from '../templates.js';
@@ -134,7 +134,6 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
   }
 
   initialize(view) {
-    this._view = view;
     const { proxyElement, hub } = view;
     this._unsubscribes = [
       ...this._unsubscribes,
@@ -326,6 +325,15 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
     this.close();
     // TODO: q -> value
     this._view.hub.trigger(fields.query(), { q: value });
+    this._trackSubmit(value);
+  }
+
+  _trackSubmit(value) {
+    const { [EVENT_TYPE.SUBMIT]: options } = this._view.tracker.options || {};
+    if (!options) {
+      return;
+    }
+    this._view.tracker.submit(value);
   }
 
 }

package/src/layout/list/collection.js

@@ -86,12 +86,10 @@ export default class CollectionLayout extends TemplateBasedLayout {
       itemType,
       ...options,
     });
-    this._view = undefined;
     this._initTrackable();
   }
 
   initialize(view) {
-    this._view = view;
     this._unsubscribes.push(view.proxyElement.on('click', this._onClick.bind(this)));
   }
 

package/src/layout/radio/radio.js

@@ -49,7 +49,7 @@ export default class RadioLayout extends TemplateBasedLayout {
   }
 
   initialize(view) {
-    const { proxyElement } = this._view = view;
+    const { proxyElement } = view;
     this._unsubscribes = [
       ...this._unsubscribes,
       view.hub.on(this._field, () => this._refresh()),

package/src/layout/text/typewriter/index.js

@@ -50,8 +50,7 @@ export default class TypewriterLayout extends ProgressiveLayout {
     }
   }
 
-  initialize(view) {
-    this._view = view;
+  initialize() {
     this._setup();
   }
 

package/src/layout/trackable.js

@@ -1,4 +1,3 @@
-import { EVENT_TYPE } from '../constants.js';
 import Bindings from '../util/bindings.js';
 import Viewables from '../util/viewables.js';
 import { validateClick } from '../util/trackers.js';

package/src/version.js

@@ -1 +1 @@
-export default '1.10.2-beta.1';
+export default '1.10.2-beta.3';

package/src/workflow/base.js

@@ -1,4 +1,4 @@
-import { Component } from '@miso.ai/commons';
+import { Component, isNullLike } from '@miso.ai/commons';
 import { Hub, SessionMaker, DataActor, ViewsActor, InteractionsActor, fields } from '../actor/index.js';
 import * as sources from '../source/index.js';
 import { STATUS, ROLE } from '../constants.js';
@@ -22,6 +22,10 @@ function mergeDefaults(workflow, { layouts, interactions, ...defaults } = {}) {
   };
 }
 
+function getRevision(data) {
+  return data && data.value && data.value.revision;
+}
+
 export default class Workflow extends Component {
 
   constructor({
@@ -108,6 +112,15 @@ export default class Workflow extends Component {
       return; // ignore data for old session or inactive session
     }
 
+    // compare revision to omit outdated data, if any
+    const revision = getRevision(data);
+    if (!isNullLike(revision)) {
+      const currentRevision = getRevision(this._hub.states[fields.data()]);
+      if (!isNullLike(currentRevision) && revision <= currentRevision) {
+        return;
+      }
+    }
+
     this._sessions.start(); // in case session not started yet
 
     data = this._defaultProcessData(data);

package/src/workflow/explore.js

@@ -2,7 +2,7 @@ import { API } from '@miso.ai/commons';
 import Workflow from './base.js';
 import { mergeApiOptions } from './options.js';
 import { fields } from '../actor/index.js';
-import { ROLE } from '../constants.js';
+import { ROLE, EVENT_TYPE } from '../constants.js';
 import { ListLayout, SearchBoxLayout } from '../layout/index.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
@@ -17,6 +17,10 @@ const DEFAULT_LAYOUTS = Object.freeze({
 
 const DEFAULT_TRACKERS = Object.freeze({
   [ROLE.RELATED_QUESTIONS]: {},
+  [ROLE.CONTAINER]: {},
+  [ROLE.QUERY]: {
+    [EVENT_TYPE.SUBMIT]: {},
+  },
 });
 
 const DEFAULT_OPTIONS = Object.freeze({