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

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

@@ -1,7 +1,6 @@
-import { trimObj, defineValues, Resolution } from '@miso.ai/commons';
+import { trimObj, defineValues, Resolution, pacer } from '@miso.ai/commons';
 import { LAYOUT_CATEGORY, STATUS } from '../../../constants.js';
 import ProgressiveLayout from '../../progressive.js';
-import ProgressController from './progress.js';
 import PlaintextRenderer from './plaintext.js';
 import { containerElement, cursorClassName, fromSameSession } from './utils.js';
 
@@ -27,6 +26,9 @@ export default class TypewriterLayout extends ProgressiveLayout {
     tag = 'auto',
     format = 'markdown',
     tooltip = false,
+    speed,
+    acceleration,
+    nextCursorFn,
     ...options
   } = {}) {
     super({
@@ -39,7 +41,7 @@ export default class TypewriterLayout extends ProgressiveLayout {
       className,
     });
     this._prevState = undefined;
-    this._progress = new ProgressController(options);
+    this._getNextCursor = typeof nextCursorFn === 'function' ? nextCursorFn : pacer({ speed, acceleration });
     this._readiness = new Resolution();
 
     // kick off sooner
@@ -81,7 +83,7 @@ export default class TypewriterLayout extends ProgressiveLayout {
       onDebug,
     });
     // capture citation link click if necessary
-    this._unsubscribes.push(this._view.proxyElement.on('click', (e) => this._handleClick(e)));
+    this._unsubscribes.push(this._view.proxyElement.on('click', (e) => this._onClick(e)));
   }
 
   _getSource(index) {
@@ -134,7 +136,7 @@ export default class TypewriterLayout extends ProgressiveLayout {
       // new typing streak
       result = this._renderer.clear(container, rendered);
     } else {
-      const cursor = this._progress.get(rendered, state);
+      const cursor = this._getNextCursor(rendered.cursor, state.doneAt, rendered.timestamp, state.timestamp);
       result = this._renderer.update(container, rendered, { ...state, cursor });
     }
     writeToState(result);
@@ -148,7 +150,7 @@ export default class TypewriterLayout extends ProgressiveLayout {
   }
 
   // event //
-  _handleClick({ target }) {
+  _onClick({ target }) {
     const element = target.closest(`[data-role="citation-link"]`);
     if (!element) {
       return;

package/src/layout/trackable.js

@@ -0,0 +1,106 @@
+import { EVENT_TYPE } from '../constants.js';
+import Bindings from '../util/bindings.js';
+import Viewables from '../util/viewables.js';
+import { validateClick } from '../util/trackers.js';
+
+export function makeTrackable(prototype) {
+  _mixin(prototype, TrackableMixin.prototype);
+}
+
+function _mixin(target, source) {
+  const descriptors = Object.getOwnPropertyDescriptors(source);
+  for (const key in descriptors) {
+    if (key === 'constructor') {
+      continue;
+    }
+    const { value } = descriptors[key];
+    if (target[key] === undefined && typeof value === 'function') {
+      target[key] = value;
+    }
+    // TODO: getter, setter
+  }
+}
+
+export class TrackableMixin {
+
+  _initTrackable() {
+    this._bindings = new Bindings();
+    this._viewables = new Viewables();
+  }
+
+  _syncBindings(element, state) {
+    const values = this._getItems(state) || [];
+    const keys = values.map(value => this._getItemKey(value));
+    const elements = this._getItemElements(element);
+
+    const { bounds, unbounds } = this._bindings.update(keys, values, elements);
+    this._onBindingsUpdate(bounds, unbounds);
+  }
+
+  _clearBindings() {
+    const { bounds, unbounds } = this._bindings.clear();
+    this._onBindingsUpdate(bounds, unbounds);
+  }
+
+  _getItemKey(value) {
+    // TODO: ad-hoc!
+    return value.product_id || value.text || value.id || value;
+  }
+
+  _getItems(state) {
+    throw new Error(`Not implemented.`);
+  }
+
+  _getItemElements(element) {
+    throw new Error(`Not implemented.`);
+  }
+
+  _onBindingsUpdate(bounds, unbounds) {
+    this._trackImpressions(bounds);
+    this._untrackViewables(unbounds);
+    this._trackViewables(bounds);
+  }
+
+  _trackImpressions(entries) {
+    if (entries.length === 0) {
+      return;
+    }
+    const { impression: options } = this._view.tracker.options || {};
+    if (!options) {
+      return;
+    }
+    this._view.tracker.impression(entries.map(({ value }) => value));
+  }
+
+  _untrackViewables(entries) {
+    for (const { element } of entries) {
+      this._viewables.untrack(element);
+    }
+  }
+
+  _trackViewables(entries) {
+    if (entries.length === 0) {
+      return;
+    }
+    const { viewable: options } = this._view.tracker.options || {};
+    if (!options) {
+      return;
+    }
+    for (const { value, element } of entries) {
+      (async () => (await this._viewables.track(element, options)) && this._view.tracker.viewable([value]))();
+    }
+  }
+
+  _trackClick(event, binding) {
+    const { click: options } = this._view.tracker.options || {};
+    if (validateClick(options, event, binding)) {
+      this._view.tracker.click([binding.value]);
+    }
+  }
+
+  _destroyTrackable() {
+    const { unbounds } = this._bindings.clear();
+    this._untrackViewables(unbounds);
+  }
+
+}

package/src/util/bindings.js

@@ -1,122 +1,66 @@
-import { isElement, isInDocument, findInAncestors } from '@miso.ai/commons';
-
-export function fallbackListFunction(keyAttrName) {
-  return element => Array.from(element.querySelectorAll(`[${keyAttrName}]`)).map(element => ({
-    element,
-    value: {
-      product_id: element.getAttribute(keyAttrName), // TODO: product_id is ad-hoc
-    },
-  }));
+function tuple(keys, values, elements) {
+  const k2b = new Map();
+  const e2b = new Map();
+  const entries = [];
+  for (let index = 0; index < keys.length; index++) {
+    const key = keys[index];
+    const element = elements[index];
+    const value = values[index];
+    const entry = Object.freeze({ index, key, value, element });
+    k2b.set(key, entry);
+    e2b.set(element, entry);
+    entries.push(entry);
+  }
+  return { k2b, e2b, entries };
 }
 
-export class Bindings {
-
-  constructor({
-    keyAttrName = 'data-key',
-    list,
-  } = {}) {
-    this._list = list || fallbackListFunction(keyAttrName);
-    this._bindings = new Map();
-    this._e2b = new WeakMap();
+function diff(from, to) {
+  const entries = [];
+  for (const entry of to.entries) {
+    const f = from.e2b.get(entry.element);
+    if (!f || f.key !== entry.key) {
+      entries.push(entry);
+    }
   }
+  return entries;
+}
 
-  list() {
-    return [...this._bindings.values()];
-  }
+export default class Bindings {
 
-  get(ref) {
-    if (!ref) {
-      throw new Error(`Value or element is required.`);
-    }
-    if (!this._root) {
-      return undefined;
-    }
-    if (!isElement(ref)) {
-      return this._bindings.get(ref);
-    }
-    return findInAncestors(ref, element => this._e2b.get(element) || undefined, { root: this._root });
+  constructor() {
+    this._k2b = new Map();
+    this._e2b = new Map();
+    this._entries = [];
   }
 
-  refresh(rootElement) {
-    if (!rootElement) {
-      return this.unbindAll();
-    }
-    this._root = rootElement;
-    const unbounds = this._purge();
-    const bounds = [];
-    // warn for conflict productIds
-    // TODO
-    for (const pair of this._list(rootElement)) {
-      const [binding, ...ubs] = this._bind(pair);
-      if (binding) {
-        bounds.push(binding);
-      }
-      for (const u of ubs) {
-        unbounds.push(u);
-      }
-    }
-    return { bounds, unbounds };
+  get entries() {
+    return [...this._entries];
   }
 
-  unbindAll() {
-    const unbounds = this.list();
-    this._bindings.clear();
-    this._root = undefined;
-    return { bounds: [], unbounds };
+  get(element) {
+    return this._e2b.get(element) || undefined;
   }
 
+  update(keys, values, elements) {
+    const newTuple = tuple(keys, values, elements);
+    const oldTuple = { k2b: this._k2b, e2b: this._e2b, entries: this._entries };
 
+    const bounds = diff(oldTuple, newTuple);
+    const unbounds = diff(newTuple, oldTuple);
 
-  _bind({ element, key, value }) {
-    key = key || value;
-    if (!key) {
-      throw new Error(`Key or value is required.`);
-    }
-    if (!element) {
-      throw new Error(`Element is required.`);
-    }
-
-    // check if binding already exist
-    const oldBinding = this._bindings.get(key);
-    if (oldBinding && oldBinding.element === element) {
-      return [];
-    }
-    const unbound0 = this._unbind(this.get(key));
-    const unbound1 = this._unbind(this.get(element));
-
-    const binding = Object.freeze({ key, value, element });
-    this._bindings.set(key, binding);
-    this._e2b.set(element, binding);
-
-    const results = [binding];
-    unbound0 && results.push(unbound0);
-    unbound1 && results.push(unbound1);
-
-    return results;
-  }
+    this._k2b = newTuple.k2b;
+    this._e2b = newTuple.e2b;
+    this._entries = newTuple.entries;
 
-  _purge() {
-    const purged = [];
-    for (const binding of this._bindings.values()) {
-      const { element } = binding;
-      if (isInDocument(element)) {
-        continue;
-      }
-      purged.push(this._unbind(binding));
-    }
-    return purged;
-  }
-
-  _unbind(binding) {
-    if (binding) {
-      this._bindings.delete(binding.key);
-      this._e2b.delete(binding.element);
-    }
-    return binding;
+    return { bounds, unbounds };
   }
 
-  _destroy() {
-    this.unbindAll();
+  clear() {
+    const unbounds = this._entries;
+    this._k2b = new Map();
+    this._e2b = new Map();
+    this._entries = [];
+    return { bounds: [], unbounds };
   }
 
 }

package/src/util/states.js

@@ -4,6 +4,7 @@ import { EVENT_TYPE, TRACKING_STATUS, validateEventType, validateTrackingStatus
 const { IMPRESSION, VIEWABLE, CLICK } = EVENT_TYPE;
 const { UNTRACKED, TRIGGERED } = TRACKING_STATUS;
 
+/*
 const STATES = {
   NEW: Object.freeze({
     [IMPRESSION]: UNTRACKED,
@@ -15,51 +16,56 @@ const STATES = {
     [CLICK]: UNTRACKED,
   }),
 };
+*/
+
+const UNTRACKED_STATES = Object.freeze({
+  [IMPRESSION]: UNTRACKED,
+  [VIEWABLE]: UNTRACKED,
+  [CLICK]: UNTRACKED,
+});
 
 /**
  * Tracking states for a session to keep track of the tracking status of each product.
- * For each entry there are status of impression, viewable, and click events. 
- * The actual click tracking status depends on the presence of root element, which is not respected in this object.
+ * For each entry there are status of impression, viewable, and click events.
  */
 export default class States {
 
   constructor(sessionId) {
     this.sessionId = sessionId;
-    this._states = new Map(); // productId -> {impression, viewable, click}
+    this._states = new Map(); // item key -> {impression, viewable, click}
   }
 
-  getFullState(productId) {
+  getFullState(item) {
     // when we receive a bind event, impression is trigger, making an entry here
     // so if the state is not found, the product is not present yet => all untracked
-    const state = this._states.get(getKey(productId));
-    return state ? { ...state } : STATES.UNTRACKED;
+    const state = this._states.get(this._getKey(item));
+    return state ? { ...state } : UNTRACKED_STATES;
   }
 
-  get(productId, type) {
-    const state = this._states.get(getKey(productId));
+  get(item, type) {
+    const state = this._states.get(this._getKey(item));
     return state && state[type] || UNTRACKED;
   }
 
-  set(productIds, type, status) {
+  set(items, type, status) {
     validateEventType(type);
     validateTrackingStatus(status);
-    for (const productId of asArray(productIds)) {
-      this._setOne(getKey(productId), type, status);
+    for (const item of asArray(items)) {
+      this._setOne(item, type, status);
     }
   }
 
-  _setOne(productId, type, status) {
-    // leave click untracked/tracking judged by its global state
-    computeIfAbsent(this._states, productId, () => ({ ...STATES.NEW }))[type] = status;
+  untriggered(items, type) {
+    return items.filter(item => this.get(item, type) !== TRIGGERED);
   }
 
-  untriggered(productIds, type) {
-    return productIds.filter(productId => this.get(productId, type) !== TRIGGERED);
+  _getKey(item) {
+    // TODO: ad-hoc! should move away to higher level
+    return item.product_id || item.text || item.id || item;
   }
 
-}
+  _setOne(item, type, status) {
+    computeIfAbsent(this._states, this._getKey(item), () => ({ ...UNTRACKED_STATES }))[type] = status;
+  }
 
-function getKey(value) {
-  // TODO: ad-hoc!
-  return value.product_id || value.text || value;
 }

package/src/util/trackers.js

@@ -0,0 +1,69 @@
+import { findInAncestors, trimObj } from '@miso.ai/commons';
+
+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 && { ...def, ...opt };
+}
+
+export 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 = {}, ...rest } = options;
+  return trimObj({
+    ...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),
+  });
+}
+
+export function validateClick(options = {}, event) {
+  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 (!findInAncestors(event.target, element => (element.tagName === 'A' && element.href) || undefined)) {
+    return false;
+  }
+
+  return true;
+}

package/src/util/viewables.js

@@ -0,0 +1,47 @@
+import { viewable as whenViewable } from '@miso.ai/commons';
+
+export default class Viewables {
+
+  constructor() {
+    this._entries = new WeakMap();
+  }
+
+  isTracked(element) {
+    return this._entries.has(element);
+  }
+
+  async track(element, options = {}) {
+    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 whenViewable(element, { ...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);
+  }
+
+}

package/src/version.js

@@ -1 +1 @@
-export default '1.10.0-beta.8';
+export default '1.10.0';

package/src/workflow/ask.js

@@ -36,7 +36,7 @@ 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({
@@ -44,7 +44,6 @@ const DEFAULT_TRACKERS = Object.freeze({
   [ROLE.RELATED_RESOURCES]: {},
   [ROLE.AFFILIATION]: {},
   [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/src/workflow/base.js

@@ -1,5 +1,5 @@
 import { Component } from '@miso.ai/commons';
-import { Hub, SessionMaker, DataActor, ViewsActor, InteractionsActor, Trackers, fields } from '../actor/index.js';
+import { Hub, SessionMaker, DataActor, ViewsActor, InteractionsActor, fields } from '../actor/index.js';
 import * as sources from '../source/index.js';
 import { STATUS, ROLE } from '../constants.js';
 import { ContainerLayout, ErrorLayout } from '../layout/index.js';
@@ -46,9 +46,8 @@ export default class Workflow extends Component {
 
     this._sessions = new SessionMaker(hub);
     this._data = new DataActor(hub, { source: sources.api(client), options });
-    const views = this._views = new ViewsActor(hub, { extensions, layouts, roles, options, workflow: name });
+    this._views = new ViewsActor(hub, { extensions, layouts, roles, options, workflow: name });
     this._interactions = new InteractionsActor(hub, { client, options });
-    this._trackers = new Trackers(hub, { views, options });
 
     this._unsubscribes = [
       this._hub.on(fields.response(), data => this.updateData(data)),
@@ -151,7 +150,7 @@ export default class Workflow extends Component {
 
   // trackers //
   get trackers() {
-    return this._trackers;
+    return this._views.trackers;
   }
 
   _preprocessInteraction({
@@ -190,7 +189,6 @@ export default class Workflow extends Component {
     }
     this._unsubscribes = [];
 
-    this._trackers._destroy();
     this._views._destroy({ dom });
     this._data._destroy();
   }

package/src/workflow/recommendation.js

@@ -53,6 +53,7 @@ export default class Recommendation extends Workflow {
     return this;
   }
 
+  // TODO: deprecate this
   startTracker() {
     this.useApi(false);
     this.useLayouts(false);

package/dist/cjs/actor/trackers.js

@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _tracker = _interopRequireDefault(require("./tracker.js"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-class Trackers {
-  constructor(hub, _ref) {
-    let {
-      views,
-      options
-    } = _ref;
-    this._hub = hub;
-    this._views = views;
-    this._options = options;
-    this._trackers = {};
-    options.on('trackers', () => this._syncConfig());
-    this._syncConfig();
-  }
-  _syncConfig() {
-    for (const [role, options] of Object.entries(this._options.resolved.trackers)) {
-      this._createOrConfigTracker(role, options);
-    }
-  }
-  _createOrConfigTracker(role, options) {
-    if (options === undefined) {
-      return;
-    }
-    let tracker = this._trackers[role];
-    if (!tracker) {
-      tracker = this._trackers[role] = new _tracker.default(this._hub, this._views.get(role), options);
-      Object.defineProperty(this, role, {
-        get: () => this._trackers[role]
-      });
-    } else {
-      tracker.config(options);
-    }
-  }
-  _destroy() {
-    for (const tracker of Object.values(this._trackers)) {
-      try {
-        tracker._destroy();
-      } catch (e) {
-        console.error(e);
-      }
-    }
-  }
-}
-exports.default = Trackers;