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

package/src/actor/view.js

@@ -1,272 +0,0 @@
-import { trimObj, defineValues, delegateGetters, EventEmitter } from '@miso.ai/commons';
-import { STATUS, ROLE, isDataRole } from '../constants.js';
-import * as fields from './fields.js';
-import ProxyElement from '../util/proxy.js';
-
-// TODO: browser dependency on syncSize
-
-function statesEqual(a, b) {
-  return a === b || (a && b &&
-    a.status === b.status &&
-    a.error === b.error &&
-    a.value === b.value && // skip deep equals
-    a.ongoing === b.ongoing &&
-    stateEmptyness(a) === stateEmptyness(b) && // TODO: ad-hoc
-    sessionEquals(a.session, b.session));
-}
-
-function sessionEquals(a, b) {
-  return a === b || (a && b && a.uuid === b.uuid);
-}
-
-function stateEmptyness(data) {
-  return data && data.meta && data.meta.empty;
-}
-
-export default class ViewActor {
-
-  constructor(views, role) {
-    this._events = new EventEmitter({ target: this });
-    this._views = views;
-    // TODO: we should pull this up to views, for the results are also used in judging container emptyness
-    this._mapping = asMappingFunction((views._roles.mappings || {})[role] || role);
-
-    defineValues(this, {
-      role,
-      interface: new View(this),
-    });
-  }
-
-  get hub() {
-    return this._views._hub;
-  }
-
-  get element() {
-    return this._element;
-  }
-
-  set element(element) {
-    if (element === this._element) {
-      return;
-    }
-    if (this._element) {
-      this._safeApplyOnLayout('unrender', this._element);
-    }
-    this._element = element;
-    this._proxyElement && this._proxyElement.sync();
-    this._events.emit('element', element);
-    this.refresh({ force: true });
-  }
-
-  get proxyElement() {
-    if (!this._proxyElement) {
-      this._proxyElement = new ProxyElement(() => this.element);
-    }
-    return this._proxyElement;
-  }
-
-  get layout() {
-    return this._layout;
-  }
-
-  set layout(layout) {
-    if (layout === this._layout) {
-      return;
-    }
-    if (layout && typeof layout.render !== 'function') {
-      throw new Error(`Render function is mandatory in a layout.`);
-    }
-
-    // clean up old layout
-    const { element } = this;
-    element && this._safeApplyOnLayout('unrender', element);
-    this._safeApplyOnLayout('destroy');
-
-    this._layout = layout;
-
-    // initialize new layout
-    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
-    this.refresh({ force: true });
-  }
-
-  get tracker() {
-    return this._views.trackers[this.role];
-  }
-
-  get workflow() {
-    return this._views._workflow;
-  }
-
-  get workflowOptions() {
-    return this._views._options.resolved;
-  }
-
-  get trackerOptions() {
-    return this._views._getTrackerOptions(this.role);
-  }
-
-  get filters() {
-    return this._views.filters;
-  }
-
-  async refresh({ force = false, data } = {}) {
-    // protocol: no reaction when layout is absent
-    if (!this._layout) {
-      return;
-    }
-
-    // nothing to do when element is absent
-    const { element } = this;
-    if (!element) {
-      return;
-    }
-
-    // sync data
-    const previousData = this._data;
-    this._data = data = this._sliceData(data || this._views._getData());
-
-    // if data is unchanged, skip unless forced
-    if (!force && statesEqual(data, previousData)) {
-      return;
-    }
-
-    const { session, status, ongoing, request, meta, value } = data;
-    const baseState = { session, status, ongoing, request, meta, data: value, ...getDataEmptyness(this.role, data) };
-
-    // render
-    const notifyUpdate = (state = {}, options) => {
-      state !== false && this.updateState({ ...baseState, ...state }, options);
-    };
-    try {
-      await this._layout.render(element, data, { notifyUpdate });
-    } catch (error) {
-      this._error(error);
-      notifyUpdate({ error });
-    }
-  }
-
-  updateState(state, { silent = false } = {}) {
-    // there might be error from notifyUpdate() call
-    const status = state.error ? STATUS.ERRONEOUS : state.status;
-    state = this._state = Object.freeze(trimObj({ ...state, status }));
-    const { role } = this;
-    this.hub.update(fields.view(role), state, { silent });
-  }
-
-  _sliceData(data) {
-    const { value, error, status, meta, ...rest } = data;
-    const sliced = {
-      value: this._mapping(data, this),
-      status,
-      data: value,
-      meta,
-      ...rest,
-    };
-    if (this.role === ROLE.CONTAINER) {
-      // pass empty/nonempty information
-      sliced.meta = {
-        ...meta,
-        empty: this._isContainerEmpty(data),
-      };
-    }
-    return trimObj(sliced);
-  }
-
-  // TODO: move this to workflow
-  _isContainerEmpty(data) {
-    const { element } = this;
-    if (!element) {
-      return false;
-    }
-    // iterate over all member components' roles
-    for (const { role } of element.components) {
-      // not a data role -> irrelevant
-      if (!isDataRole(role)) {
-        continue;
-      }
-      // respect data mapping
-      const mapping = asMappingFunction((this._views._roles.mappings || {})[role] || role);
-      const sliced = mapping(data, this); // TODO: the view passed in should be the view of the role, not container role
-      if (!isDateValueEmpty(role, sliced)) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  _syncSize() {
-    this._element && this._safeApplyOnLayout('syncSize', this._element);
-  }
-
-  _safeApplyOnLayout(method, ...args) {
-    if (!this._layout || typeof this._layout[method] !== 'function') {
-      return;
-    }
-    try {
-      this._layout[method](...args);
-    } catch (e) {
-      this._error(e);
-    }
-  }
-
-  _emit(name, data) {
-    this._events.emit(name, data);
-    this._views._events.emit(`${this.role}:${name}`, data);
-  }
-
-  _error(e) {
-    this._views._error(e);
-  }
-
-  _destroy() {
-    this._safeApplyOnLayout('destroy');
-    this._proxyElement && this._proxyElement.destroy();
-  }
-
-}
-
-class View {
-
-  constructor(actor) {
-    delegateGetters(this, actor, ['role', 'layout', 'element', 'proxyElement', 'refresh', 'on', 'tracker']);
-  }
-
-}
-
-function asMappingFunction(fn) {
-  switch (typeof fn) {
-    case 'function':
-      return fn;
-    case 'string':
-      return data => data.value && data.value[fn];
-    default:
-      throw new Error(`Invalid mapping function: ${fn}`);
-  }
-}
-
-function getDataEmptyness(role, data) {
-  return isDataStatusRelevantToEmptyness(data) ? { empty: !!isDateValueEmpty(role, data && data.value) } : {};
-}
-
-function isDataStatusRelevantToEmptyness(data) {
-  return data.status === STATUS.READY && !data.ongoing;
-}
-
-function isDateValueEmpty(role, value) {
-  // TODO: ad-hoc
-  switch (role) {
-    case ROLE.ANSWER:
-    case ROLE.REASONING:
-      return !value || !value.value;
-    default:
-      return value === undefined || ((Array.isArray(value) || typeof value === 'string') && !value.length);
-  }
-}

package/src/actor/views.js

@@ -1,224 +0,0 @@
-import { defineValues, delegateGetters, EventEmitter } from '@miso.ai/commons';
-import { ROLE } from '../constants.js';
-import * as fields from './fields.js';
-import ViewActor from './view.js';
-import Filters from './filters.js';
-
-export default class ViewsActor {
-
-  constructor(hub, {
-    workflow,
-    extensions,
-    layouts,
-    roles,
-    options,
-  }) {
-    this._hub = hub;
-    this._workflow = workflow;
-    this._workflowName = workflow._name;
-    this._extensions = extensions;
-    this._layoutFactory = layouts;
-    this._options = options;
-    this._roles = roles;
-    this._containers = new Map();
-    this._components = new Map();
-    this._filters = new Filters(this);
-    this._events = new EventEmitter();
-
-    defineValues(this, {
-      interface: new Views(this),
-    });
-
-    this._unsubscribes = [
-      onResize(this.syncSize.bind(this)),
-      hub.on(fields.data(), data => this.refresh({ data })),
-      options.on('layouts', () => this._syncLayouts()),
-    ];
-
-    this._syncLayouts();
-  }
-
-  get filters() {
-    return this._filters;
-  }
-
-  get trackers() {
-    return this._workflow.trackers;
-  }
-
-  on(role, name, fn) {
-    return this._events.on(`${role}:${name}`, fn);
-  }
-
-  // elements //
-  addContainer(element) {
-    if (this._containers.has(element)) {
-      return;
-    }
-    const view = this._createView(element);
-    this._containers.set(element, view);
-
-    const { components } = element;
-    for (const component of components) {
-      this.addComponent(component);
-    }
-  }
-
-  removeContainer(element) {
-    const view = this._containers.get(element);
-    if (!view) {
-      return;
-    }
-    const { components } = element;
-    for (const component of components) {
-      this.removeComponent(component);
-    }
-    view._destroy();
-    this._containers.delete(element);
-  }
-
-  addComponent(element) {
-    if (this._components.has(element)) {
-      return;
-    }
-    const view = this._createView(element);
-    this._components.set(element, view);
-  }
-
-  removeComponent(element) {
-    const view = this._components.get(element);
-    if (!view) {
-      return;
-    }
-    view._destroy();
-    this._components.delete(element);
-  }
-
-  updateComponentRole(element, oldRole, newRole) {
-    // TODO
-  }
-
-  containsElement(element) {
-    return this._containers.has(element) || this._components.has(element);
-  }
-
-  refreshElement(element) {
-    const view = element.isContainer ? this._containers.get(element) : this._components.get(element);
-    view && view.refresh({ force: true });
-  }
-
-  _createView(element) {
-    const view = new ViewActor(this, element.role);
-    view.layout = this._createLayout(element.role);
-    view.element = element;
-    return view;
-  }
-
-  _syncLayouts() {
-    // TODO: put a debug event here
-    const { layouts } = this._options.resolved;
-    if (layouts === false) {
-      for (const view of [...this._containers.values(), ...this._components.values()]) {
-        view.layout = undefined;
-      }
-    } else {
-      for (const view of [...this._containers.values(), ...this._components.values()]) {
-        view.layout = this._createLayout(view.role);
-      }
-    }
-  }
-
-  _createLayout(role) {
-    const args = this._options.resolved.layouts[role];
-    if (!args) {
-      return undefined;
-    }
-    const [name, options] = args;
-    return this._layoutFactory.create(name, { ...options, role, workflow: this._workflowName });
-  }
-
-  get(role) {
-    return this.getAll(role)[0];
-  }
-
-  getAll(role) {
-    return role === ROLE.CONTAINER ? this._containers.values() : this._components.values().filter(view => view.role === role);
-  }
-
-  get views() {
-    return this._getViews(true);
-  }
-
-  _getViews(containerFirst = true) {
-    return containerFirst ? [
-      ...this._containers.values(),
-      ...this._components.values(),
-    ] : [
-      ...this._components.values(),
-      ...this._containers.values(),
-    ];
-  }
-
-  syncSize() {
-    // TODO: containers?
-    for (const view of this._components.values()) {
-      view._syncSize();
-    }
-  }
-
-  async refresh({ force, data } = {}) {
-    data = this._getData(data);
-    // container first
-    let views = this._getViews(true);
-
-    await Promise.all(views.map(view => view.refresh({ force, data })));
-  }
-
-  _getData(data) {
-    return data || this._hub.states[fields.data()];
-  }
-
-  _error(e) {
-    // TODO: hub trigger error event
-    console.error(e);
-  }
-
-  _destroy({ dom } = {}) {
-    // destroy components, and then containers
-    for (const view of this._getViews(false)) {
-      // TODO: handle dom option
-      view._destroy();
-    }
-    for (const unsubscribe of this._unsubscribes) {
-      unsubscribe();
-    }
-    this._unsubscribes = [];
-    this._filters._destroy();
-  }
-
-}
-
-class Views {
-
-  constructor(actor) {
-    this._actor = actor;
-    delegateGetters(this, actor, ['syncSize', 'refresh', 'trackers', 'filters']);
-  }
-
-  get(role) {
-    return this._actor.get(role).interface;
-  }
-
-  get all() {
-    return this._actor.views.map(view => view.interface);
-  }
-
-}
-
-function onResize(callback) {
-  if (typeof window === 'undefined') {
-    return () => {};
-  }
-  window.addEventListener('resize', callback);
-  return () => window.removeEventListener('resize', callback);
-}

package/src/source.js

@@ -1,17 +0,0 @@
-import { API } from '@miso.ai/commons';
-
-export function api(client) {
-  // TODO: send uuid & unit id
-  return async ({ group, name, payload, options }) => {
-    if (group === API.GROUP.ASK) {
-      switch (name) {
-        case API.NAME.QUESTIONS:
-          return client.api.ask.questions(payload, options);
-        case API.NAME.SEARCH:
-          return client.api.ask.search(payload, options);
-      }
-    }
-    // because name is in snake case
-    return client.api[group]._run(name, payload, options);
-  };
-}

package/src/util/proxy.js

@@ -1,81 +0,0 @@
-import { removeItem, findAndRemoveItem } from '@miso.ai/commons';
-
-export default class ProxyElement {
-
-  constructor(element) {
-    this._get = typeof element === 'function' ? element : () => element;
-    this._handlers = [];
-    this._elementUpdatedHandlers = [];
-    this.sync();
-  }
-
-  get current() {
-    return this._element;
-  }
-
-  on(event, handler) {
-    if (event === 'element') {
-      return this._onElementUpdated(handler);
-    }
-    const element = this._get();
-    if (element) {
-      element.addEventListener(event, handler);
-    }
-    this._handlers.push({ event, handler });
-    return () => this._off(event, handler);
-  }
-
-  _off(event, handler) {
-    const element = this._get();
-    if (element) {
-      element.removeEventListener(event, handler);
-    }
-    findAndRemoveItem(this._handlers, en => en.handler === handler);
-  }
-
-  _onElementUpdated(handler) {
-    this._elementUpdatedHandlers.push(handler);
-    return () => {
-      removeItem(this._elementUpdatedHandlers, handler);
-    };
-  }
-
-  sync({ silent = false } = {}) {
-    const element = this._get();
-    if (this._element === element) {
-      return;
-    }
-    this._offAllFromCurrentElement();
-    if (element) {
-      for (const { event, handler } of this._handlers) {
-        element.addEventListener(event, handler);
-      }
-    }
-    const oldElement = this._element;
-    this._element = element;
-
-    if (silent) {
-      return;
-    }
-    for (const handler of this._elementUpdatedHandlers) {
-      try {
-        handler(element, oldElement);
-      } catch (e) {
-        console.error(e); // TODO
-      }
-    }
-  }
-
-  _offAllFromCurrentElement() {
-    if (this._element) {
-      for (const { event, handler } of this._handlers) {
-        this._element.removeEventListener(event, handler);
-      }
-    }
-  }
-
-  destroy() {
-    this._offAllFromCurrentElement();
-  }
-
-}

package/src/util/trackers.js

@@ -1,84 +0,0 @@
-import { findInAncestors, trimObj } from '@miso.ai/commons';
-
-const TRACKED = Symbol.for('miso:tracked');
-
-export function isTracked(event) {
-  return !!event[TRACKED];
-}
-
-export function markAsTracked(event) {
-  event[TRACKED] = true;
-}
-
-const DEFAULT_TRACKER_OPTIONS = Object.freeze({
-  impression: Object.freeze({
-  }),
-  viewable: Object.freeze({
-    area: 0.5,
-    duration: 1000,
-  }),
-  click: Object.freeze({
-    lenient: false,
-  }),
-});
-
-function mergeOptions(def, opt) {
-  // if opt is falsy then return false, merge otherwise
-  return !!opt && { ...def, ...opt };
-}
-
-// TODO: don't need this anymore
-export function normalizeTrackerOptions(options) {
-  // TODO: make this { active: false } to keep it an object
-  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. each event can only be tracked once
-  if (isTracked(event)) {
-    return false;
-  }
-  // 2. it must be a left click
-  if (event.button !== 0) {
-    return false;
-  }
-  // 3. event default must not be prevented
-  if (event.defaultPrevented) {
-    return false;
-  }
-  // 4. must go through a real link
-  if (!findInAncestors(event.target, element => (element.tagName === 'A' && element.href) || undefined)) {
-    return false;
-  }
-
-  return true;
-}