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

package/dist/cjs/util/trackers.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizeTrackerOptions = normalizeTrackerOptions;
+exports.validateClick = validateClick;
+var _commons = require("@miso.ai/commons");
+const _excluded = ["impression", "viewable", "click"];
+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; }
+const DEFAULT_TRACKER_OPTIONS = Object.freeze({
+  impression: Object.freeze({}),
+  viewable: Object.freeze({
+    area: 0.5,
+    duration: 1000
+  }),
+  click: Object.freeze({
+    lenient: false
+  }),
+  watch: false
+});
+function mergeOptions(def, opt) {
+  // if opt is falsy then return false, merge otherwise
+  return !!opt && Object.assign({}, def, opt);
+}
+function normalizeTrackerOptions(options) {
+  if (options === false) {
+    return false; // turn off all tracking
+  }
+  if (options === true) {
+    options = {};
+  }
+  if (typeof options !== 'object') {
+    throw new Error(`Invalid options: ${options}`);
+  }
+  const {
+      impression = {},
+      viewable = {},
+      click = {}
+    } = options,
+    rest = _objectWithoutPropertiesLoose(options, _excluded);
+  return (0, _commons.trimObj)(Object.assign({}, DEFAULT_TRACKER_OPTIONS, rest, {
+    impression: mergeOptions(DEFAULT_TRACKER_OPTIONS.impression, impression),
+    viewable: mergeOptions(DEFAULT_TRACKER_OPTIONS.viewable, viewable),
+    click: mergeOptions(DEFAULT_TRACKER_OPTIONS.click, click)
+  }));
+}
+function validateClick() {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let event = arguments.length > 1 ? arguments[1] : undefined;
+  if (!options) {
+    return false;
+  }
+  if (typeof options.validate === 'function') {
+    return options.validate(event);
+  }
+  if (options.lenient) {
+    return true;
+  }
+
+  // standard criteria
+  // 1. it must be a left click
+  if (event.button !== 0) {
+    return false;
+  }
+  // 2. event default must not be prevented
+  if (event.defaultPrevented) {
+    return false;
+  }
+  // 3. must go through a real link
+  if (!(0, _commons.findInAncestors)(event.target, element => element.tagName === 'A' && element.href || undefined)) {
+    return false;
+  }
+  return true;
+}

package/dist/cjs/util/viewables.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _commons = require("@miso.ai/commons");
+class Viewables {
+  constructor() {
+    this._entries = new WeakMap();
+  }
+  isTracked(element) {
+    return this._entries.has(element);
+  }
+  async track(element) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    if (!options) {
+      return false;
+    }
+    const entry = this._entries.get(element);
+    if (entry) {
+      return false;
+    }
+    const ac = new AbortController();
+    const {
+      signal
+    } = ac;
+    this._entries.set(element, {
+      ac
+    });
+    let result = false;
+    try {
+      await (0, _commons.viewable)(element, Object.assign({}, options, {
+        signal
+      }));
+      result = true;
+    } catch (e) {
+      if (e.name !== 'AbortError') {
+        throw e;
+      }
+    } finally {
+      this._entries.delete(element);
+    }
+    return result;
+  }
+  untrack(element) {
+    const entry = this._entries.get(element);
+    if (!entry) {
+      return;
+    }
+    entry.ac.abort();
+    this._entries.delete(element);
+  }
+}
+exports.default = Viewables;

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

package/dist/cjs/workflow/ask.js

@@ -67,12 +67,8 @@ 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.AFFILIATION]: {},
   [_constants.ROLE.QUERY_SUGGESTIONS]: {
-    active: true,
-    // we are tracking events at initial stage, when session is not active yet
     click: {
       validate: event => event.button === 0 // left click only
     }

package/dist/cjs/workflow/base.js

@@ -65,7 +65,7 @@ class Workflow extends _commons.Component {
       source: sources.api(client),
       options
     });
-    const views = this._views = new _index.ViewsActor(hub, {
+    this._views = new _index.ViewsActor(hub, {
       extensions,
       layouts,
       roles,
@@ -76,10 +76,6 @@ class Workflow extends _commons.Component {
       client,
       options
     });
-    this._trackers = new _index.Trackers(hub, {
-      views,
-      options
-    });
     this._unsubscribes = [this._hub.on(_index.fields.response(), data => this.updateData(data))];
   }
   get uuid() {
@@ -171,7 +167,7 @@ class Workflow extends _commons.Component {
 
   // trackers //
   get trackers() {
-    return this._trackers;
+    return this._views.trackers;
   }
   _preprocessInteraction() {
     let _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -209,7 +205,6 @@ class Workflow extends _commons.Component {
       unsubscribe();
     }
     this._unsubscribes = [];
-    this._trackers._destroy();
     this._views._destroy({
       dom
     });

package/dist/cjs/workflow/recommendation.js

@@ -57,6 +57,8 @@ class Recommendation extends _base.default {
     }));
     return this;
   }
+
+  // TODO: deprecate this
   startTracker() {
     this.useApi(false);
     this.useLayouts(false);

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.9"
+    "@miso.ai/commons": "1.10.1-beta.0"
   },
-  "version": "1.10.0-beta.9"
+  "version": "1.10.1-beta.0"
 }

package/src/actor/index.js

@@ -5,7 +5,6 @@ export { default as Hub } from './hub.js';
 export { default as SessionMaker } from './sessions.js';
 export { default as DataActor } from './data.js';
 export { default as ViewsActor } from './views.js';
-export { default as Trackers } from './trackers.js';
 export { default as FeedbackActor } from './feedback.js';
 export { default as AutocompleteActor } from './autocomplete.js';
 export { default as InteractionsActor } from './interactions.js';

package/src/actor/tracker.js

@@ -1,98 +1,55 @@
-import { STATUS, ATTR_DATA_MISO_PRODUCT_ID, EVENT_TYPE } from '../constants.js';
+import { asArray } from '@miso.ai/commons';
+import { TRACKING_EVENT_TYPES, TRACKING_STATUS, validateEventType } from '../constants.js';
 import * as fields from './fields.js';
-import _Tracker from '../util/tracker.js';
-import { fallbackListFunction } from '../util/bindings.js';
+import States from '../util/states.js';
 import { toInteraction } from './utils.js';
 
-function isReady(viewState) {
-  return viewState && viewState.status === STATUS.READY;
-}
-
 export default class Tracker {
 
-  constructor(hub, view, { active, bindings, ...options } = {}) {
-    this._hub = hub;
+  constructor(view) {
     this._view = view;
-    this._bindings = bindings;
-    const role = this._role = view.role;
+    this._role = view.role;
     // TODO: know item type
 
-    this._tracker = new _Tracker({
-      bindings: {
-        list: element => this._listBindingsFn()(element),
-      },
-      proxyElement: view.proxyElement,
-      sessionId: () => this._getSessionId(),
-      active: active || (() => this._isViewReady()),
-      ...options,
-    });
-
-    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()),
-    ];
-
-    this.refresh();
-  }
-
-  config(options) {
-    this._tracker.config(options);
+    this._states = new States(this._getSessionId());
   }
 
-  start() {
-    throw new Error(`workflow.tracker.start() is deprecated. Use workflow.startTracker() instead.`);
+  get options() {
+    return this._view._getTrackerOptions();
   }
 
-  refresh() {
-    this._tracker.refresh();
+  getState(item) {
+    return this._states.getFullState(item);
   }
 
-  impression(productIds, options) {
-    this._assertViewReady();
-    this._tracker.impression(productIds.map(product_id => ({ product_id })), options);
-  }
+  _trigger(type, items, meta = {}) {
+    validateEventType(type);
+    this._syncSession();
 
-  viewable(productIds, options) {
-    this._assertViewReady();
-    this._tracker.viewable(productIds.map(product_id => ({ product_id })), options);
-  }
+    items = this._states.untriggered(asArray(items), type);
+    if (items.length === 0) {
+      return;
+    }
+    this._states.set(items, type, TRACKING_STATUS.TRIGGERED);
 
-  click(productIds, options) {
-    this._assertViewReady();
-    this._tracker.click(productIds.map(product_id => ({ product_id })), options);
-  }
+    const property = this._role === 'results' ? 'products' : this._role; // TODO: ad-hoc, see #83
+    const misoId = this._getMisoId();
+    const request = this._getRequestPayload();
 
-  _listBindingsFn() {
-    if (this._bindings && typeof this._bindings.list === 'function') {
-      return this._bindings.list;
-    }
-    const { layout } = this._view;
-    if (layout && layout.bindings && typeof layout.bindings.list === 'function') {
-      return layout.bindings.list;
-    }
-    // TODO: only if item is product typed
-    return fallbackListFunction(ATTR_DATA_MISO_PRODUCT_ID);
+    // 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 }));
   }
 
-  _assertViewReady() {
-    if (!this._hub.active) {
-      throw new Error(`Workflow is not active. Call workflow.start() to activate it.`);
+  _syncSession() {
+    const sessionId = this._getSessionId();
+    if (!sessionId) {
+      return;
     }
-    if (!isReady(this._getViewState())) {
-      throw new Error(`Workflow is not rendered yet. If you handle rendering by yourself, call workflow.notifyViewUpdate() when DOM is ready.`);
+    if (!this._states || sessionId !== this._states.sessionId) {
+      this._states = new States(sessionId);
     }
   }
 
-  _getViewState() {
-    return this._hub.states[fields.view(this._role)];
-  }
-
-  _isViewReady() {
-    return this._hub.active && isReady(this._getViewState());
-  }
-
   _getSessionId() {
     const { session } = this._getViewState() || {};
     return session && session.uuid;
@@ -100,7 +57,7 @@ export default class Tracker {
 
   _getMisoId() {
     const state = this._getViewState();
-    return (state && state.meta && state.meta.miso_id) || (this._element && this._element.getAttribute('miso-id')) || undefined;
+    return (state && state.meta && state.meta.miso_id) || undefined;
   }
 
   _getRequestPayload() {
@@ -108,28 +65,14 @@ export default class Tracker {
     return request && request.payload;
   }
 
-  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();
-    const request = this._getRequestPayload();
-    // TODO: should trigger 'tracker' and let workflow translate to interactions
-    this._hub.trigger(fields.interaction(), toInteraction({ property, misoId, request }, data));
+  _getViewState() {
+    return this._view.hub.states[fields.view(this._role)];
   }
 
-  _destroy() {
-    for (const unsubscribe of this._unsubscribes) {
-      unsubscribe();
-    }
-    this._unsubscribes = [];
-    this._tracker.destroy();
-  }
+}
 
+for (const type of TRACKING_EVENT_TYPES) {
+  Tracker.prototype[type] = function(items, meta) {
+    this._trigger(type, items, meta);
+  };
 }

package/src/actor/utils.js

@@ -22,7 +22,7 @@ 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 => v.product_id).filter(v => v) : [];
+  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;

package/src/actor/view.js

@@ -2,6 +2,7 @@ import { trimObj, defineValues, delegateGetters, EventEmitter } from '@miso.ai/c
 import { STATUS, ROLE, isDataRole } from '../constants.js';
 import * as fields from './fields.js';
 import ProxyElement from '../util/proxy.js';
+import Tracker from './tracker.js';
 
 function statesEqual(a, b) {
   return a === b || (a && b &&
@@ -85,6 +86,13 @@ export default class ViewActor {
     this.refresh({ force: true });
   }
 
+  get tracker() {
+    if (!this._tracker) {
+      this._tracker = new Tracker(this);
+    }
+    return this._tracker;
+  }
+
   async refresh({ force = false, data } = {}) {
     // protocol: no reaction when layout is absent
     if (!this._layout) {
@@ -134,6 +142,11 @@ export default class ViewActor {
     this.hub.update(fields.view(role), state, { silent });
   }
 
+  _getTrackerOptions() {
+    // used by tracker to expose tracker options to layout
+    return this._views._getTrackerOptions(this.role);
+  }
+
   _sliceData({ value, error, status, meta, ...rest }) {
     const sliced = {
       value: this.role === ROLE.ERROR ? error : (value && value[this.role]),
@@ -205,7 +218,7 @@ export default class ViewActor {
 class View {
 
   constructor(actor) {
-    delegateGetters(this, actor, ['role', 'layout', 'element', 'proxyElement', 'refresh', 'on']);
+    delegateGetters(this, actor, ['role', 'layout', 'element', 'proxyElement', 'refresh', 'on', '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 { normalizeTrackerOptions } from '../util/trackers.js';
 
 export default class ViewsActor {
 
@@ -19,6 +20,7 @@ export default class ViewsActor {
     this._options = options;
     this._containers = new Map();
     this._views = {};
+    this._trackers = new Trackers(this, roles);
 
     for (const role of roles) {
       this._views[role] = new ViewActor(this, role);
@@ -34,12 +36,18 @@ export default class ViewsActor {
     this._unsubscribes = [
       () => window.removeEventListener('resize', syncSize),
       hub.on(fields.data(), () => this.refresh()),
+      options.on('trackers', () => this._syncTrackers()),
       options.on('layouts', () => this._syncLayouts()),
     ];
 
+    this._syncTrackers();
     this._syncLayouts();
   }
 
+  get trackers() {
+    return this._trackers;
+  }
+
   // elements //
   addContainer(element) {
     if (this._containers.has(element)) {
@@ -185,6 +193,14 @@ export default class ViewsActor {
     return this._data;
   }
 
+  _syncTrackers() {
+    this._trackerOptions = this._options.resolved.trackers;
+  }
+
+  _getTrackerOptions(role) {
+    return normalizeTrackerOptions((this._trackerOptions && this._trackerOptions[role]) || false);
+  }
+
   _error(e) {
     // TODO: hub trigger error event
     console.error(e);
@@ -208,7 +224,7 @@ class Views {
 
   constructor(actor) {
     this._actor = actor;
-    delegateGetters(this, actor, ['syncSize', 'refresh']);
+    delegateGetters(this, actor, ['syncSize', 'refresh', 'trackers']);
   }
 
   get(role) {
@@ -220,3 +236,16 @@ class Views {
   }
 
 }
+
+class Trackers {
+
+  constructor(views, roles) {
+    this._views = views;
+    for (const role of roles) {
+      Object.defineProperty(this, role, {
+        get: () => views.get(role).tracker,
+      });
+    }
+  }
+
+}

package/src/asset/svgs.js

@@ -1,13 +1,23 @@
 import version from '../version.js';
 
+function trianglePath(r) {
+  const l = 100;
+  const d = r * Math.tan(3 * Math.PI / 8);
+  const e = d * Math.sin(Math.PI / 4);
+  return `M${r} 0L${l-d} 0A${r} ${r} 0 0 1 ${l-e} ${e}L${e} ${l-e}A${r} ${r} 0 0 1 0 ${l-d}L0 ${r}Z`;
+}
+
 const PREFIX = 'miso-ui-icon';
 const ID = `${PREFIX}-svg-${version.replaceAll('.', '_')}`;
 
-// all are CC0 SVGs
+// CC0 SVGs
 const ICON_SEND = `<symbol id="${PREFIX}-send" viewBox="0 0 32 32"><path fill="currentColor" d="M11.499,19.173l5.801,-5.849c0.389,-0.392 1.022,-0.394 1.414,-0.006c0.392,0.389 0.395,1.022 0.006,1.414l-5.798,5.847l5.306,8.002c0.207,0.313 0.572,0.483 0.945,0.441c0.373,-0.042 0.691,-0.289 0.824,-0.64l9.024,-23.904c0.138,-0.366 0.05,-0.78 -0.226,-1.058c-0.276,-0.278 -0.689,-0.369 -1.057,-0.233l-24.004,8.892c-0.353,0.13 -0.602,0.448 -0.646,0.821c-0.044,0.373 0.125,0.74 0.438,0.948l7.973,5.325Z"/></symbol>`;
 const ICON_SEARCH = `<symbol id="${PREFIX}-search" viewBox="0 0 24 24"><path fill="currentColor" d="M4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11ZM11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.125 20 15.078 19.2635 16.6177 18.0319L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L18.0319 16.6177C19.2635 15.078 20 13.125 20 11C20 6.02944 15.9706 2 11 2Z"/></symbol>`;
 
-const ICONS = [ICON_SEND, ICON_SEARCH];
+// Custom SVGs
+const ICON_TRIANGLE = `<symbol id="${PREFIX}-triangle" viewBox="-5 -5 105 105"><path d="${trianglePath(5)}"/></symbol>`;
+
+const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE];
 
 const SPRITES_SVG = `<svg id="${ID}" style="display:none;">${ICONS.join('')}</svg>`;
 
@@ -29,3 +39,4 @@ function getSvg(name) {
 
 export const SEND = getSvg('send');
 export const SEARCH = getSvg('search');
+export const TRIANGLE = getSvg('triangle');

package/src/constants.js

@@ -59,6 +59,12 @@ export const EVENT_TYPE = Object.freeze({
   CLICK: 'click',
 });
 
+export const TRACKING_EVENT_TYPES = [
+  EVENT_TYPE.IMPRESSION,
+  EVENT_TYPE.VIEWABLE,
+  EVENT_TYPE.CLICK,
+];
+
 export const TRACKING_STATUS = Object.freeze({
   UNTRACKED: 'untracked',
   TRACKING: 'tracking',
@@ -77,7 +83,7 @@ export const STATUS = Object.freeze({
 });
 
 export function validateEventType(value) {
-  if (value !== EVENT_TYPE.IMPRESSION && value !== EVENT_TYPE.VIEWABLE && value !== EVENT_TYPE.CLICK) {
+  if (TRACKING_EVENT_TYPES.indexOf(value) < 0) {
     throw new Error(`Unrecognized event type: ${value}`);
   }
 }