@miso.ai/client-sdk-ui 1.10.0-beta.7 → 1.10.0-beta.9

package/dist/cjs/actor/tracker.js

@@ -39,7 +39,9 @@ class Tracker {
       sessionId: () => this._getSessionId(),
       active: active || (() => this._isViewReady())
     }, options));
-    this._unsubscribes = [this._tracker.on('*', data => this._handleEvent(data)), hub.on(fields.view(role), () => this.refresh())];
+    this._unsubscribes = [this._tracker.on('*', data => this._handleEvent(data)),
+    // TODO: view actor has another click event that does not comply to this data format
+    ...[_constants.EVENT_TYPE.VIEWABLE].map(type => this._view.on(type, values => this._handleViewActorEvent(type, values))), hub.on(fields.view(role), () => this.refresh())];
     this.refresh();
   }
   config(options) {
@@ -115,6 +117,9 @@ class Tracker {
   getState(productId) {
     return this._tracker.getState(productId);
   }
+  _handleViewActorEvent(type, values) {
+    this._tracker._trigger(type, values);
+  }
   _handleEvent(data) {
     const property = this._role === 'results' ? 'products' : this._role; // TODO: ad-hoc, see #83
     const misoId = this._getMisoId();

package/dist/cjs/actor/utils.js

@@ -35,7 +35,9 @@ function toInteraction(_ref, _ref2) {
   const question_source = request && request._meta && request._meta.question_source;
   const isProductType = isProduct(property);
   const product_ids = isProductType ? values.map(v => v.product_id).filter(v => v) : [];
-  const items = isProductType ? undefined : values.map(v => v.text || 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 payload = (0, _commons.trimObj)({
     type: event === 'viewable' ? 'viewable_impression' : event,
     product_ids,
@@ -44,7 +46,9 @@ function toInteraction(_ref, _ref2) {
       custom_context: (0, _commons.trimObj)({
         api_ts,
         property,
+        channel,
         items,
+        positions,
         trigger: manual ? 'manual' : 'auto',
         question_source
       })

package/dist/cjs/affiliation/index.js

@@ -27,18 +27,45 @@ function processValue(value) {
         sovrn_aff
       } = value,
       rest = _objectWithoutPropertiesLoose(value, _excluded);
-    return Object.assign({}, rest, {
+    value = Object.assign({}, rest, {
       affiliation: processSovrnData(sovrn_aff)
     });
   }
-  return value;
+  return postProcessValue(value);
+}
+function postProcessValue(value) {
+  const {
+    affiliation
+  } = value;
+  if (!affiliation) {
+    return value;
+  }
+  let {
+    channel,
+    products
+  } = affiliation;
+  if (!products) {
+    return value;
+  }
+  products = products.map(product => Object.assign({}, product));
+  let i = 0;
+  for (const product of products) {
+    if (channel) {
+      product.channel = channel;
+    }
+    product.position = i++;
+  }
+  return Object.assign({}, value, {
+    affiliation: Object.assign({}, affiliation, {
+      products
+    })
+  });
 }
 function processSovrnData(_ref) {
   let {
       products
     } = _ref,
     sovrn_aff = _objectWithoutPropertiesLoose(_ref, _excluded2);
-  products = products.slice(0, 1);
   return Object.assign({
     channel: 'sovrn'
   }, sovrn_aff, {
@@ -64,7 +91,6 @@ function processSovrnProduct(_ref2) {
   const brand_logo = merchant && merchant.logo;
   return (0, _commons.trimObj)({
     id: `sovrn-${id}`,
-    channel: 'sovrn',
     title,
     description,
     cover_image,

package/dist/cjs/layout/affiliation/affiliation.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _constants = require("../../constants.js");
 var _collection = _interopRequireDefault(require("../list/collection.js"));
 var _templates = require("../templates.js");
+var _viewable = _interopRequireDefault(require("./viewable.js"));
 const _excluded = ["className", "templates"];
 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; }
@@ -30,28 +31,26 @@ function ready(layout, state) {
   const {
     templates
   } = layout;
-  const {
-    products
-  } = state.value || {};
-  if (products && products.length > 0) {
-    return templates.body(layout, state);
+  const items = layout._getItems(state);
+  if (items && items.length > 0) {
+    return templates.control(layout, state, 'previous') + templates.body(layout, state) + templates.control(layout, state, 'next');
   } else {
     return templates.empty(layout, state);
   }
 }
+function control(layout, state, direction) {
+  const {
+    className
+  } = layout;
+  return `<div class="${className}__control-${direction}" data-role="${direction}"></div>`;
+}
 function body(layout, state) {
   const {
     className,
     templates
   } = layout;
-  let {
-    channel,
-    products
-  } = state.value;
-  products = products.map(product => Object.assign({
-    channel
-  }, product));
-  return `<div class="${className}__body">${templates.header(layout, state)}${templates.list(layout, state, products)}</div>`;
+  const items = layout._getItems(state);
+  return `<div class="${className}__body">${templates.list(layout, state, items)}</div>`;
 }
 function header(layout, state) {
   const {
@@ -69,11 +68,47 @@ function header(layout, state) {
   }
   return `<div class="${className}__header"><div class="${className}__header-tab">${headerText}</div></div>`;
 }
+function item(layout, state, value, index) {
+  const {
+    className,
+    templates,
+    options
+  } = layout;
+  const {
+    itemType
+  } = options;
+  const header = templates.itemHeader(layout, state, value, {
+    index
+  });
+  const body = templates[itemType](layout, state, value, {
+    index
+  });
+  return `<li class="${className}__item">${header}${body}</li>`;
+}
+function itemHeader(layout, state, value, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  let {
+    headerText
+  } = templates;
+  if (typeof headerText === 'function') {
+    headerText = headerText(layout, state, value, meta);
+  }
+  if (!headerText) {
+    return '';
+  }
+  return `<div class="${className}__item-header"><div class="${className}__item-header-tab">${headerText}</div></div>`;
+}
 const DEFAULT_TEMPLATES = Object.freeze({
   root,
   [_constants.STATUS.READY]: ready,
+  control,
   body,
   header,
+  item,
+  itemHeader,
   affiliation: _templates.affiliation,
   ctaText: 'View',
   headerText: 'Featured'
@@ -104,6 +139,127 @@ class AffiliationLayout extends _collection.default {
       itemType: 'affiliation',
       templates: Object.assign({}, DEFAULT_TEMPLATES, templates)
     }, options));
+    this._itemCount = undefined;
+    this._itemIndex = 0;
+    this._displayedIndex = undefined;
+    this._viewable = new _viewable.default(this._onViewable.bind(this));
+  }
+  get itemIndex() {
+    return this._itemIndex;
+  }
+  next() {
+    if (this._itemCount === undefined) {
+      return;
+    }
+    this.go(this._itemIndex + 1);
+  }
+  previous() {
+    if (this._itemCount === undefined) {
+      return;
+    }
+    this.go(this._itemIndex - 1);
+  }
+  go(index) {
+    if (this._itemCount === undefined) {
+      return;
+    }
+    if (index < 0) {
+      index = this._itemCount - 1;
+    } else if (index >= this._itemCount) {
+      index = 0;
+    }
+    this._itemIndex = index;
+    this._syncItemIndex();
+  }
+  _getItems(state) {
+    const {
+      products
+    } = state.value || {};
+    return products;
+  }
+  _render(element, states, controls) {
+    super._render(element, states, controls);
+    this._syncItemCount(element, states);
+    this._syncItemIndex();
+  }
+  _syncElement(element) {
+    const oldElement = this._element;
+    super._syncElement(element);
+    this._syncViewableElement(oldElement, element);
+  }
+  _syncViewableElement(oldElement, newElement) {
+    if (oldElement === newElement) {
+      return;
+    }
+    oldElement && this._viewable.unobserve(oldElement);
+    newElement && this._viewable.observe(newElement);
+  }
+  _syncItemCount(element, states) {
+    element = element.firstElementChild;
+    if (!element) {
+      return;
+    }
+    const {
+      state
+    } = states;
+    const items = this._getItems(state);
+    const itemCount = this._itemCount = items ? items.length : undefined;
+    if (itemCount === undefined) {
+      element.removeAttribute('data-item-count');
+    } else {
+      element.setAttribute('data-item-count', itemCount);
+    }
+  }
+  _syncItemIndex() {
+    // TODO: raf
+    const {
+      element
+    } = this._view;
+    const listElement = element && this._getListElement(element);
+    if (!listElement) {
+      return;
+    }
+    const index = this._itemIndex;
+    if (index === this._displayedIndex) {
+      return;
+    }
+    this._displayedIndex = index;
+    listElement.style.left = `${-index * 100}%`;
+    this._viewable.display(index);
+    this._view._events.emit('display', {
+      index
+    });
+  }
+  _onViewable(index) {
+    const item = this._getRenderedItemData(index);
+    if (!item) {
+      return;
+    }
+    this._view._events.emit(_constants.EVENT_TYPE.VIEWABLE, [item]);
+  }
+  _getRenderedItemData(index) {
+    const {
+      value
+    } = this._rendered.get(this._element) || {};
+    if (!value) {
+      return undefined;
+    }
+    const {
+      products = []
+    } = value;
+    return products[index];
+  }
+  _onClick(event) {
+    super._onClick(event);
+    const element = event.target;
+    if (element.closest(`[data-role="previous"]`)) {
+      this.previous();
+      return;
+    }
+    if (element.closest(`[data-role="next"]`)) {
+      this.next();
+      return;
+    }
   }
 }
 exports.default = AffiliationLayout;

package/dist/cjs/layout/affiliation/viewable.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _commons = require("@miso.ai/commons");
+class CarouselItemViewableTracker {
+  constructor(callback) {
+    let {
+      area = 0.5,
+      duration = 1000
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    this._callback = callback;
+    this._intersection = new IntersectionObserver(this._handleIntersection.bind(this), {
+      threshold: area
+    });
+    this._continuity = new _commons.ContinuityObserver(this._handleContinuity.bind(this), {
+      onDuration: duration
+    });
+    this._displayed = undefined;
+    this._intersecting = false;
+    this._triggered = new Set();
+  }
+  observe(element) {
+    this._intersection.observe(element);
+  }
+  unobserve(element) {
+    this._intersection.unobserve(element);
+  }
+  display(index) {
+    if (this._triggered.has(index)) {
+      index = undefined;
+    }
+    if (this._displayed === index) {
+      return;
+    }
+    this._displayed = index;
+    this._continuity.value = false; // reset first, the old session is invalid now
+    this._syncContinuity();
+  }
+  disconnect() {
+    this._continuity.disconnect();
+    this._intersection.disconnect();
+  }
+  _syncContinuity() {
+    this._continuity.value = this._intersecting && this._displayed !== undefined;
+  }
+  _handleIntersection(entries) {
+    this._intersecting = entries[0].isIntersecting;
+    this._syncContinuity();
+  }
+  _handleContinuity(value) {
+    const displayed = this._displayed;
+    if (value && displayed !== undefined) {
+      if (this._triggered.has(displayed)) {
+        return;
+      }
+      this._triggered.add(displayed);
+      this._displayed = undefined;
+      this._callback(displayed);
+    }
+  }
+}
+exports.default = CarouselItemViewableTracker;

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

@@ -21,7 +21,8 @@ function ready(layout, state) {
   const {
     templates
   } = layout;
-  const nonEmpty = state.value && state.value.length > 0;
+  const items = layout._getItems(state);
+  const nonEmpty = items && items.length > 0;
   const html = Object.getPrototypeOf(layout.constructor).defaultTemplates.ready(layout, state);
   return nonEmpty ? templates.carousel(layout, state, html) : html;
 }
@@ -71,7 +72,8 @@ class CarouselLayout extends _collection.default {
     const {
       state
     } = states;
-    this._itemCount = state.value ? state.value.length : undefined;
+    const items = this._getItems(state);
+    this._itemCount = items ? items.length : undefined;
     this.syncSize();
   }
   get page() {

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

@@ -28,7 +28,7 @@ function ready(layout, state) {
   const {
     templates
   } = layout;
-  const values = state.value;
+  const values = layout._getItems(state);
 
   // TODO: handle categories, attributes, etc. by introducing sublayout
   if (values && values.length > 0 || state.ongoing) {
@@ -45,7 +45,7 @@ function list(layout, state, values) {
   } = layout;
   const listTag = templates.ordered ? 'ol' : 'ul';
   // TODO: support separator?
-  return `<${listTag} class="${className}__list" data-item-type="${options.itemType}">${templates.items(layout, state, values)}</${listTag}>`;
+  return `<${listTag} class="${className}__list" data-role="list" data-item-type="${options.itemType}">${templates.items(layout, state, values)}</${listTag}>`;
 }
 function items(layout, state, values) {
   let {
@@ -149,7 +149,7 @@ class CollectionLayout extends _template.default {
   _html(state, rendered, incremental) {
     if (incremental) {
       const offset = rendered.value.length;
-      const values = state.value.slice(offset);
+      const values = (this._getItems(state) || []).slice(offset);
       return values.length > 0 ? this.templates.items(this, state, values, {
         offset
       }) : '';
@@ -184,14 +184,17 @@ class CollectionLayout extends _template.default {
     if (!element) {
       return;
     }
-    const values = state.value || [];
+    const values = this._getItems(state) || [];
     let i = 0;
     for (const itemElement of this._listItemElements(element)) {
       itemElement[VALUE] = values[i++];
     }
   }
+  _getItems(state) {
+    return state.value;
+  }
   _getListElement(element) {
-    return element.querySelector(`.${this.className}__list`);
+    return element.querySelector('[data-role="list"]');
   }
   _listItemElements(element) {
     return element ? Array.from(element.querySelectorAll(`[data-role="item"]`)) : [];

package/dist/cjs/util/states.js

@@ -65,5 +65,5 @@ class States {
 exports.default = States;
 function getKey(value) {
   // TODO: ad-hoc!
-  return value.product_id || value.text || value;
+  return value.product_id || value.text || value.id || value;
 }

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.0-beta.7';
+var _default = exports.default = '1.10.0-beta.9';

package/dist/cjs/workflow/ask.js

@@ -57,6 +57,7 @@ const DEFAULT_LAYOUTS = Object.freeze({
   }],
   [_constants.ROLE.QUERY_SUGGESTIONS]: _index3.OptionListLayout.type,
   [_constants.ROLE.AFFILIATION]: [_index3.AffiliationLayout.type, {
+    incremental: true,
     itemType: 'affiliation',
     link: {
       rel: 'noopener nofollow'
@@ -66,6 +67,9 @@ const DEFAULT_LAYOUTS = Object.freeze({
 const DEFAULT_TRACKERS = Object.freeze({
   [_constants.ROLE.SOURCES]: {},
   [_constants.ROLE.RELATED_RESOURCES]: {},
+  [_constants.ROLE.AFFILIATION]: {
+    viewable: false // track viewable manually
+  },
   [_constants.ROLE.QUERY_SUGGESTIONS]: {
     active: true,
     // we are tracking events at initial stage, when session is not active yet

package/package.json

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

package/src/actor/tracker.js

@@ -1,4 +1,4 @@
-import { STATUS, ATTR_DATA_MISO_PRODUCT_ID } from '../constants.js';
+import { STATUS, ATTR_DATA_MISO_PRODUCT_ID, EVENT_TYPE } from '../constants.js';
 import * as fields from './fields.js';
 import _Tracker from '../util/tracker.js';
 import { fallbackListFunction } from '../util/bindings.js';
@@ -29,6 +29,8 @@ export default class Tracker {
 
     this._unsubscribes = [
       this._tracker.on('*', data => this._handleEvent(data)),
+      // TODO: view actor has another click event that does not comply to this data format
+      ...[EVENT_TYPE.VIEWABLE].map(type => this._view.on(type, values => this._handleViewActorEvent(type, values))),
       hub.on(fields.view(role), () => this.refresh()),
     ];
 
@@ -110,6 +112,10 @@ export default class Tracker {
     return this._tracker.getState(productId);
   }
 
+  _handleViewActorEvent(type, values) {
+    this._tracker._trigger(type, values);
+  }
+
   _handleEvent(data) {
     const property = this._role === 'results' ? 'products' : this._role; // TODO: ad-hoc, see #83
     const misoId = this._getMisoId();

package/src/actor/utils.js

@@ -23,7 +23,9 @@ export function toInteraction({ property, misoId, request }, { event, values, ma
   const question_source = request && request._meta && request._meta.question_source;
   const isProductType = isProduct(property);
   const product_ids = isProductType ? values.map(v => v.product_id).filter(v => v) : [];
-  const items = isProductType ? undefined : values.map(v => v.text || 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 payload = trimObj({
     type: event === 'viewable' ? 'viewable_impression' : event,
     product_ids,
@@ -32,7 +34,9 @@ export function toInteraction({ property, misoId, request }, { event, values, ma
       custom_context: trimObj({
         api_ts,
         property,
+        channel,
         items,
+        positions,
         trigger: manual ? 'manual' : 'auto',
         question_source,
       }),

package/src/affiliation/index.js

@@ -14,16 +14,41 @@ export function processData(data) {
 function processValue(value) {
   if (value.sovrn_aff) {
     const { sovrn_aff, ...rest } = value;
-    return {
+    value = {
       ...rest,
       affiliation: processSovrnData(sovrn_aff),
     }
   }
-  return value;
+  return postProcessValue(value);
+}
+
+function postProcessValue(value) {
+  const { affiliation } = value;
+  if (!affiliation) {
+    return value;
+  }
+  let { channel, products } = affiliation;
+  if (!products) {
+    return value;
+  }
+  products = products.map(product => ({ ...product }));
+  let i = 0;
+  for (const product of products) {
+    if (channel) {
+      product.channel = channel;
+    }
+    product.position = i++;
+  }
+  return {
+    ...value,
+    affiliation: {
+      ...affiliation,
+      products,
+    },
+  };
 }
 
 function processSovrnData({ products, ...sovrn_aff }) {
-  products = products.slice(0, 1);
   return {
     channel: 'sovrn',
     ...sovrn_aff,
@@ -49,7 +74,6 @@ export function processSovrnProduct({
   const brand_logo = merchant && merchant.logo;
   return trimObj({
     id: `sovrn-${id}`,
-    channel: 'sovrn',
     title,
     description,
     cover_image,

package/src/layout/affiliation/affiliation.js

@@ -1,6 +1,7 @@
-import { STATUS, LAYOUT_CATEGORY } from '../../constants.js';
+import { STATUS, LAYOUT_CATEGORY, EVENT_TYPE } from '../../constants.js';
 import CollectionLayout from '../list/collection.js';
 import { affiliation } from '../templates.js';
+import CarouselItemViewableTracker from './viewable.js';
 
 const TYPE = 'affiliation';
 const DEFAULT_CLASSNAME = 'miso-affiliation';
@@ -16,20 +17,24 @@ function root(layout, state) {
 
 function ready(layout, state) {
   const { templates } = layout;
-  const { products } = state.value || {};
+  const items = layout._getItems(state);
 
-  if (products && products.length > 0) {
-    return templates.body(layout, state);
+  if (items && items.length > 0) {
+    return templates.control(layout, state, 'previous') + templates.body(layout, state) + templates.control(layout, state, 'next');
   } else {
     return templates.empty(layout, state);
   }
 }
 
+function control(layout, state, direction) {
+  const { className } = layout;
+  return `<div class="${className}__control-${direction}" data-role="${direction}"></div>`;
+}
+
 function body(layout, state) {
   const { className, templates } = layout;
-  let { channel, products } = state.value;
-  products = products.map(product => ({ channel, ...product }));
-  return `<div class="${className}__body">${templates.header(layout, state)}${templates.list(layout, state, products)}</div>`;
+  const items = layout._getItems(state);
+  return `<div class="${className}__body">${templates.list(layout, state, items)}</div>`;
 }
 
 function header(layout, state) {
@@ -44,11 +49,34 @@ function header(layout, state) {
   return `<div class="${className}__header"><div class="${className}__header-tab">${headerText}</div></div>`;
 }
 
+function item(layout, state, value, index) {
+  const { className, templates, options } = layout;
+  const { itemType } = options;
+  const header = templates.itemHeader(layout, state, value, { index });
+  const body = templates[itemType](layout, state, value, { index });
+  return `<li class="${className}__item">${header}${body}</li>`;
+}
+
+function itemHeader(layout, state, value, meta) {
+  const { className, templates } = layout;
+  let { headerText } = templates;
+  if (typeof headerText === 'function') {
+    headerText = headerText(layout, state, value, meta);
+  }
+  if (!headerText) {
+    return '';
+  }
+  return `<div class="${className}__item-header"><div class="${className}__item-header-tab">${headerText}</div></div>`;
+}
+
 const DEFAULT_TEMPLATES = Object.freeze({
   root,
   [STATUS.READY]: ready,
+  control,
   body,
   header,
+  item,
+  itemHeader,
   affiliation,
   ctaText: 'View',
   headerText: 'Featured',
@@ -79,6 +107,128 @@ export default class AffiliationLayout extends CollectionLayout {
 
   constructor({ className = DEFAULT_CLASSNAME, templates, ...options } = {}) {
     super({ className, itemType: 'affiliation', templates: { ...DEFAULT_TEMPLATES, ...templates }, ...options });
+    this._itemCount = undefined;
+    this._itemIndex = 0;
+    this._displayedIndex = undefined;
+    this._viewable = new CarouselItemViewableTracker(this._onViewable.bind(this));
+  }
+
+  get itemIndex() {
+    return this._itemIndex;
+  }
+
+  next() {
+    if (this._itemCount === undefined) {
+      return;
+    }
+    this.go(this._itemIndex + 1);
+  }
+
+  previous() {
+    if (this._itemCount === undefined) {
+      return;
+    }
+    this.go(this._itemIndex - 1);
+  }
+
+  go(index) {
+    if (this._itemCount === undefined) {
+      return;
+    }
+    if (index < 0) {
+      index = this._itemCount - 1;
+    } else if (index >= this._itemCount) {
+      index = 0;
+    }
+    this._itemIndex = index;
+    this._syncItemIndex();
+  }
+
+  _getItems(state) {
+    const { products } = state.value || {};
+    return products;
+  }
+
+  _render(element, states, controls) {
+    super._render(element, states, controls);
+    this._syncItemCount(element, states);
+    this._syncItemIndex();
+  }
+
+  _syncElement(element) {
+    const oldElement = this._element;
+    super._syncElement(element);
+    this._syncViewableElement(oldElement, element);
+  }
+
+  _syncViewableElement(oldElement, newElement) {
+    if (oldElement === newElement) {
+      return;
+    }
+    oldElement && this._viewable.unobserve(oldElement);
+    newElement && this._viewable.observe(newElement);
+  }
+
+  _syncItemCount(element, states) {
+    element = element.firstElementChild;
+    if (!element) {
+      return;
+    }
+    const { state } = states;
+    const items = this._getItems(state);
+    const itemCount = this._itemCount = items ? items.length : undefined;
+    if (itemCount === undefined) {
+      element.removeAttribute('data-item-count');
+    } else {
+      element.setAttribute('data-item-count', itemCount);
+    }
+  }
+
+  _syncItemIndex() {
+    // TODO: raf
+    const { element } = this._view;
+    const listElement = element && this._getListElement(element);
+    if (!listElement) {
+      return;
+    }
+    const index = this._itemIndex;
+    if (index === this._displayedIndex) {
+      return;
+    }
+    this._displayedIndex = index;
+    listElement.style.left = `${-index * 100}%`;
+    this._viewable.display(index);
+    this._view._events.emit('display', { index });
+  }
+
+  _onViewable(index) {
+    const item = this._getRenderedItemData(index);
+    if (!item) {
+      return;
+    }
+    this._view._events.emit(EVENT_TYPE.VIEWABLE, [item]);
+  }
+
+  _getRenderedItemData(index) {
+    const { value } = this._rendered.get(this._element) || {};
+    if (!value) {
+      return undefined;
+    }
+    const { products = [] } = value;
+    return products[index];
+  }
+
+  _onClick(event) {
+    super._onClick(event);
+    const element = event.target;
+    if (element.closest(`[data-role="previous"]`)) {
+      this.previous();
+      return;
+    }
+    if (element.closest(`[data-role="next"]`)) {
+      this.next();
+      return;
+    }
   }
 
 }

package/src/layout/affiliation/viewable.js

@@ -0,0 +1,61 @@
+import { ContinuityObserver } from '@miso.ai/commons';
+
+export default class CarouselItemViewableTracker {
+
+  constructor(callback, { area = 0.5, duration = 1000 } = {}) {
+    this._callback = callback;
+    this._intersection = new IntersectionObserver(this._handleIntersection.bind(this), { threshold: area });
+    this._continuity = new ContinuityObserver(this._handleContinuity.bind(this), { onDuration: duration });
+
+    this._displayed = undefined;
+    this._intersecting = false;
+    this._triggered = new Set();
+  }
+
+  observe(element) {
+    this._intersection.observe(element);
+  }
+
+  unobserve(element) {
+    this._intersection.unobserve(element);
+  }
+
+  display(index) {
+    if (this._triggered.has(index)) {
+      index = undefined;
+    }
+    if (this._displayed === index) {
+      return;
+    }
+    this._displayed = index;
+    this._continuity.value = false; // reset first, the old session is invalid now
+    this._syncContinuity();
+  }
+
+  disconnect() {
+    this._continuity.disconnect();
+    this._intersection.disconnect();
+  }
+
+  _syncContinuity() {
+    this._continuity.value = this._intersecting && this._displayed !== undefined;
+  }
+
+  _handleIntersection(entries) {
+    this._intersecting = entries[0].isIntersecting;
+    this._syncContinuity();
+  }
+
+  _handleContinuity(value) {
+    const displayed = this._displayed;
+    if (value && displayed !== undefined) {
+      if (this._triggered.has(displayed)) {
+        return;
+      }
+      this._triggered.add(displayed);
+      this._displayed = undefined;
+      this._callback(displayed);
+    }
+  }
+
+}

package/src/layout/list/carousel.js

@@ -17,7 +17,8 @@ const INHERITED_DEFAULT_TEMPLATES = Object.freeze({
 
 function ready(layout, state) {
   const { templates } = layout;
-  const nonEmpty = state.value && state.value.length > 0;
+  const items = layout._getItems(state);
+  const nonEmpty = items && items.length > 0;
   const html = Object.getPrototypeOf(layout.constructor).defaultTemplates.ready(layout, state);
   return nonEmpty ? templates.carousel(layout, state, html) : html;
 }
@@ -60,7 +61,8 @@ export default class CarouselLayout extends CollectionLayout {
   _render(element, states, controls) {
     super._render(element, states, controls);
     const { state } = states;
-    this._itemCount = state.value ? state.value.length : undefined;
+    const items = this._getItems(state);
+    this._itemCount = items ? items.length : undefined;
     this.syncSize();
   }
 

package/src/layout/list/collection.js

@@ -14,7 +14,7 @@ function root(layout, state) {
 
 function ready(layout, state) {
   const { templates } = layout;
-  const values = state.value;
+  const values = layout._getItems(state);
 
   // TODO: handle categories, attributes, etc. by introducing sublayout
   if ((values && values.length > 0) || state.ongoing) {
@@ -28,7 +28,7 @@ function list(layout, state, values) {
   const { className, templates, options } = layout;
   const listTag = templates.ordered ? 'ol' : 'ul';
   // TODO: support separator?
-  return `<${listTag} class="${className}__list" data-item-type="${options.itemType}">${templates.items(layout, state, values)}</${listTag}>`;
+  return `<${listTag} class="${className}__list" data-role="list" data-item-type="${options.itemType}">${templates.items(layout, state, values)}</${listTag}>`;
 }
 
 function items(layout, state, values, { offset = 0 } = {}) {
@@ -125,7 +125,7 @@ export default class CollectionLayout extends TemplateBasedLayout {
   _html(state, rendered, incremental) {
     if (incremental) {
       const offset = rendered.value.length;
-      const values = state.value.slice(offset);
+      const values = (this._getItems(state) || []).slice(offset);
       return values.length > 0 ? this.templates.items(this, state, values, { offset }) : '';
     } else {
       return this.templates.root(this, state);
@@ -151,15 +151,19 @@ export default class CollectionLayout extends TemplateBasedLayout {
     if (!element) {
       return;
     }
-    const values = state.value || [];
+    const values = this._getItems(state) || [];
     let i = 0;
     for (const itemElement of this._listItemElements(element)) {
       itemElement[VALUE] = values[i++];
     }
   }
 
+  _getItems(state) {
+    return state.value;
+  }
+
   _getListElement(element) {
-    return element.querySelector(`.${this.className}__list`);
+    return element.querySelector('[data-role="list"]');
   }
 
   _listItemElements(element) {

package/src/util/states.js

@@ -61,5 +61,5 @@ export default class States {
 
 function getKey(value) {
   // TODO: ad-hoc!
-  return value.product_id || value.text || value;
+  return value.product_id || value.text || value.id || value;
 }

package/src/version.js

@@ -1 +1 @@
-export default '1.10.0-beta.7';
+export default '1.10.0-beta.9';

package/src/workflow/ask.js

@@ -36,12 +36,15 @@ const DEFAULT_LAYOUTS = Object.freeze({
   [ROLE.SOURCES]: [ListLayout.type, { incremental: true, itemType: 'article', templates: { ordered: true } }],
   [ROLE.RELATED_RESOURCES]: [ListLayout.type, { incremental: true, itemType: 'article' }],
   [ROLE.QUERY_SUGGESTIONS]: OptionListLayout.type,
-  [ROLE.AFFILIATION]: [AffiliationLayout.type, { itemType: 'affiliation', link: { rel: 'noopener nofollow' } }],
+  [ROLE.AFFILIATION]: [AffiliationLayout.type, { incremental: true, itemType: 'affiliation', link: { rel: 'noopener nofollow' } }],
 });
 
 const DEFAULT_TRACKERS = Object.freeze({
   [ROLE.SOURCES]: {},
   [ROLE.RELATED_RESOURCES]: {},
+  [ROLE.AFFILIATION]: {
+    viewable: false, // track viewable manually
+  },
   [ROLE.QUERY_SUGGESTIONS]: {
     active: true, // we are tracking events at initial stage, when session is not active yet
     click: {