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

package/src/workflow/recommendation.js

@@ -1,39 +1,49 @@
-import { defineValues, trimObj, API } from '@miso.ai/commons';
+import { defineValues, API } from '@miso.ai/commons';
 import Workflow from './base.js';
-import { mergeApiOptions } from './options.js';
-import { fields } from '../actor/index.js';
 import { ListLayout } from '../layout/index.js';
 import { ROLE } from '../constants.js';
+import { mergeRolesOptions } from './options.js';
+import { mergeInteraction } from './processors.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
+  ...Workflow.DEFAULT_API_OPTIONS,
   group: API.GROUP.RECOMMENDATION,
   name: API.NAME.USER_TO_PRODUCTS,
   payload: {
+    ...Workflow.DEFAULT_API_OPTIONS.payload,
     fl: ['*'],
   },
 });
 
 const DEFAULT_LAYOUTS = Object.freeze({
+  ...Workflow.DEFAULT_LAYOUTS,
   [ROLE.PRODUCTS]: ListLayout.type,
 });
 
 const DEFAULT_TRACKERS = Object.freeze({
+  ...Workflow.DEFAULT_TRACKERS,
   [ROLE.PRODUCTS]: {},
 });
 
 const DEFAULT_OPTIONS = Object.freeze({
+  ...Workflow.DEFAULT_OPTIONS,
   api: DEFAULT_API_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS,
 });
 
+const ROLES_OPTIONS = mergeRolesOptions(Workflow.ROLES_OPTIONS, {
+  main: ROLE.PRODUCTS,
+  members: Object.keys(DEFAULT_LAYOUTS),
+});
+
 export default class Recommendation extends Workflow {
 
   constructor(context, id) {
     super({
       name: 'recommendation',
       context,
-      roles: Object.keys(DEFAULT_LAYOUTS),
+      roles: ROLES_OPTIONS,
       defaults: DEFAULT_OPTIONS,
       id,
     });
@@ -45,28 +55,15 @@ export default class Recommendation extends Workflow {
     defineValues(this, { id });
   }
 
-  _initReset(args) {
+  _initSession(args) {
     this._context._members.set(args.id, this);
-    super._initReset(args);
+    super._initSession(args);
   }
 
   // lifecycle //
   start() {
-    this._sessions.start();
     // in recommendation workflow, start() triggers query
-    // TODO: we should still make the query lifecycle
-    const { session } = this;
-    this._hub.update(fields.request(), mergeApiOptions(this._options.resolved.api, { session }));
-    return this;
-  }
-
-  // TODO: deprecate this
-  startTracker() {
-    this.useApi(false);
-    this.useLayouts(false);
-    this._sessions.start();
-    this.notifyViewUpdate(ROLE.CONTAINER);
-    this.notifyViewUpdate(ROLE.PRODUCTS);
+    this._request();
     return this;
   }
 
@@ -76,21 +73,23 @@ export default class Recommendation extends Workflow {
   }
 
   // interactions //
-  _preprocessInteraction(payload) {
-    payload = super._preprocessInteraction(payload) || {};
-    const { context = {} } = payload;
-    const { custom_context = {} } = context;
-    return {
-      ...payload,
+  _defaultProcessInteraction(payload, args) {
+    payload = super._defaultProcessInteraction(payload, args);
+    payload = this._writeUnitIdToInteraction(payload, args);
+    return payload;
+  }
+
+  _writeUnitIdToInteraction(payload) {
+    const unit_id = this.id;
+    const unit_instance_uuid = this.uuid;
+    return mergeInteraction(payload, {
       context: {
-        ...context,
-        custom_context: trimObj({
-          unit_id: this.id,
-          unit_instance_uuid: this.uuid,
-          ...custom_context,
-        }),
+        custom_context: {
+          unit_id,
+          unit_instance_uuid,
+        },
       },
-    };
+    });
   }
 
   // destroy //

package/src/workflow/search-based.js

@@ -0,0 +1,222 @@
+import { API } from '@miso.ai/commons';
+import Workflow from './base.js';
+import { fields } from '../actor/index.js';
+import { STATUS, ROLE } from '../constants.js';
+import { SearchBoxLayout, ListLayout, TextLayout, FacetsLayout, MoreButtonLayout } from '../layout/index.js';
+import { writeKeywordsToData, writeFiltersToPayload, retainFacetCountsInData, writeExhaustionToData, concatItemsFromMoreResponse } from './processors.js';
+import { mergeRolesOptions, makeConfigurable } from './options.js';
+
+const DEFAULT_ROWS = 10;
+const DEFAULT_PAGE_LIMIT = 10;
+
+const DEFAULT_API_OPTIONS = Object.freeze({
+  ...Workflow.DEFAULT_API_OPTIONS,
+  group: API.GROUP.SEARCH,
+  payload: {
+    ...Workflow.DEFAULT_API_OPTIONS.payload,
+    fl: ['cover_image', 'url', 'created_at', 'updated_at', 'published_at', 'title'],
+    rows: DEFAULT_ROWS,
+  },
+});
+
+const DEFAULT_LAYOUTS = Object.freeze({
+  ...Workflow.DEFAULT_LAYOUTS,
+  [ROLE.QUERY]: [SearchBoxLayout.type],
+  [ROLE.PRODUCTS]: [ListLayout.type, { incremental: true, infiniteScroll: true }],
+  [ROLE.KEYWORDS]: [TextLayout.type, { raw: true }],
+  [ROLE.TOTAL]: [TextLayout.type, { raw: true, format: 'number' }],
+  [ROLE.FACETS]: [FacetsLayout.type],
+  [ROLE.MORE]: [MoreButtonLayout.type],
+});
+
+const DEFAULT_TRACKERS = Object.freeze({
+  ...Workflow.DEFAULT_TRACKERS,
+  [ROLE.PRODUCTS]: {},
+});
+
+const DEFAULT_PAGINATION = Object.freeze({
+  active: false,
+  mode: 'infiniteScroll',
+  pageLimit: 10,
+});
+
+const DEFAULT_OPTIONS = Object.freeze({
+  ...Workflow.DEFAULT_OPTIONS,
+  api: DEFAULT_API_OPTIONS,
+  layouts: DEFAULT_LAYOUTS,
+  trackers: DEFAULT_TRACKERS,
+  pagination: DEFAULT_PAGINATION,
+});
+
+const ROLES_OPTIONS = mergeRolesOptions(Workflow.ROLES_OPTIONS, {
+  main: ROLE.PRODUCTS,
+  members: Object.keys(DEFAULT_LAYOUTS),
+  mappings: {
+    [ROLE.FACETS]: 'facet_counts',
+  },
+});
+
+export default class SearchBasedWorkflow extends Workflow {
+
+  _initSubscriptions(args) {
+    super._initSubscriptions(args);
+    this._unsubscribes = [
+      ...this._unsubscribes,
+      this._hub.on(fields.query(), args => this._query(args)),
+      this._hub.on(fields.filters(), filters => this._refine(filters)),
+      this._hub.on(fields.more(), () => this._more()),
+    ];
+  }
+
+  restart() {
+    super.restart();
+    this._page = 0;
+  }
+
+  // properties //
+  get exhausted() {
+    const data = this._hub.states[fields.data()];
+    return !!(data && data.meta && data.meta.exhausted);
+  }
+
+  get page() {
+    return this._page;
+  }
+
+  // query //
+  query(args) {
+    if (!args.q) {
+      throw new Error(`q is required in query() call`);
+    }
+    this._hub.update(fields.query(), args);
+  }
+
+  _query(args) {
+    // keep track of the query args for refine and more calls
+    this._queryArgs = args;
+
+    // start a new session
+    this.restart();
+
+    // payload
+    const payload = this._buildPayload(args);
+
+    this._request({ payload });
+  }
+
+  _refine(filters) {
+    // remember current facet_counts
+    const { facet_counts } = this._hub.states[fields.data()].value || {};
+    this._currentFacetCounts = facet_counts;
+
+    // start a new session
+    this.restart();
+
+    // payload
+    const query = this._getQuery();
+    const payload = this._buildPayload({ ...query, filters });
+
+    this._request({ payload });
+  }
+
+  _more() {
+    // if still loading, complain
+    if (this.status !== STATUS.READY) {
+      throw new Error(`Can not call more() while loading.`);
+    }
+    // no more pages, ignore
+    if (this.exhausted || this._page >= DEFAULT_PAGE_LIMIT - 1) {
+      return;
+    }
+    // don't create a new session!
+
+    this._page++;
+
+    // payload
+    const query = this._getQuery();
+    const filters = this._hub.states[fields.filters()]; // get stored filters
+    let payload = this._buildPayload({ ...query, filters });
+    payload = this._processPayloadForMoreRequest(payload);
+
+    this._request({ payload });
+  }
+
+  _getQuery() {
+    // TODO: just get from the hub
+    return this._queryArgs;
+  }
+
+  _getPageSize() {
+    return this._options.resolved.api.payload.rows;
+  }
+
+  _buildPayload({ filters, ...payload } = {}) {
+    payload = writeFiltersToPayload(payload, filters);
+    payload = this._writePageInfoToPayload(payload);
+    return payload;
+  }
+
+  _writePageInfoToPayload(payload) {
+    return {
+      ...payload,
+      _meta: {
+        ...payload._meta,
+        page: this._page,
+      },
+    };
+  }
+
+  _processPayloadForMoreRequest(payload = {}) {
+    const data = this._hub.states[fields.data()];
+    const { [this._roles.main]: items = [] } = (data && data.value) || {};
+    const productIds = items.map(item => item.product_id).filter(v => v);
+    const exclude = [...(payload.exclude || []), ...productIds];
+    if (exclude.length === 0) {
+      return payload;
+    }
+    return {
+      ...payload,
+      exclude,
+    };
+  }
+
+  // data //
+  _defaultProcessData(data) {
+    data = super._defaultProcessData(data);
+    data = writeKeywordsToData(data);
+    data = retainFacetCountsInData(data, this._currentFacetCounts);
+    data = writeExhaustionToData(data, { role: this._roles.main });
+    return data;
+  }
+
+  _updateDataInHub(data) {
+    data = this._appendResultsFromMoreRequest(data);
+    super._updateDataInHub(data);
+  }
+
+  _appendResultsFromMoreRequest(data) {
+    const { request } = data;
+    if (!request) {
+      return data; // the initial state
+    }
+    const { _meta } = request.payload;
+    if (!_meta || !_meta.page) {
+      return data; // not from "more" request
+    }
+    // concat records if it's from "more" request
+    const currentData = this._hub.states[fields.data()];
+    return concatItemsFromMoreResponse(currentData, data, { role: this._roles.main });
+  }
+
+}
+
+makeConfigurable(SearchBasedWorkflow.prototype, ['pagination']);
+
+Object.assign(SearchBasedWorkflow, {
+  DEFAULT_API_OPTIONS,
+  DEFAULT_LAYOUTS,
+  DEFAULT_TRACKERS,
+  DEFAULT_PAGINATION,
+  DEFAULT_OPTIONS,
+  ROLES_OPTIONS,
+});

package/src/workflow/search.js

@@ -1,11 +1,7 @@
 import { API } from '@miso.ai/commons';
-import Workflow from './base.js';
-import { mergeApiOptions } from './options.js';
-import * as sources from '../source.js';
-import { fields, AutocompleteActor } from '../actor/index.js';
-import { ROLE, DATA_ASPECT } from '../constants.js';
-import { ListLayout, SearchBoxLayout } from '../layout/index.js';
-import { makeConfigurable } from './options.js';
+import { ROLE } from '../constants.js';
+import SearchBasedWorkflow from './search-based.js';
+import { makeAutocompletable } from './autocompletable.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   group: API.GROUP.SEARCH,
@@ -16,7 +12,6 @@ const DEFAULT_API_OPTIONS = Object.freeze({
 });
 
 const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
-  actor: false,
   api: {
     group: API.GROUP.SEARCH,
     name: API.NAME.AUTOCOMPLETE,
@@ -25,54 +20,43 @@ const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
       fl: ['title', 'url', 'cover_image'],
     },
   },
-  throttle: 300,
 });
 
 const DEFAULT_LAYOUTS = Object.freeze({
-  [ROLE.QUERY]: SearchBoxLayout.type,
-  [ROLE.PRODUCTS]: ListLayout.type,
+  ...SearchBasedWorkflow.DEFAULT_LAYOUTS,
 });
 
 const DEFAULT_TRACKERS = Object.freeze({
-  [ROLE.PRODUCTS]: {},
+  ...SearchBasedWorkflow.DEFAULT_TRACKERS,
 });
 
 const DEFAULT_OPTIONS = Object.freeze({
+  ...SearchBasedWorkflow.DEFAULT_OPTIONS,
   api: DEFAULT_API_OPTIONS,
   autocomplete: DEFAULT_AUTOCOMPLETE_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS,
 });
 
-export default class Search extends Workflow {
+const ROLES_OPTIONS = SearchBasedWorkflow.ROLES_OPTIONS;
+
+export default class Search extends SearchBasedWorkflow {
 
   constructor(plugin, client) {
     super({
       name: 'search',
       plugin,
       client,
-      roles: Object.keys(DEFAULT_LAYOUTS),
+      roles: ROLES_OPTIONS,
       defaults: DEFAULT_OPTIONS,
     });
   }
 
-  _initActors(args) {
-    super._initActors(args);
-    this._autocomplete = new AutocompleteActor(this._hub, {
-      source: sources.api(this._client),
-      options: this._options,
-    });
+  _initProperties(args) {
+    super._initProperties(args);
+    this._initAutocomplete(args);
   }
 
-  _initSubscriptions(args) {
-    super._initSubscriptions(args);
-    this._unsubscribes = [
-      ...this._unsubscribes,
-      this._hub.on(fields.query(), args => this._query(args)),
-    ];
-  }
-
-  // lifecycle //
   autoQuery({ setValue = true, focus = true } = {}) {
     const q = new URLSearchParams(window.location.search).get('q');
     const { layout } = this._views.get(ROLE.QUERY);
@@ -89,46 +73,18 @@ export default class Search extends Workflow {
     }
   }
 
-  query(args) {
-    if (!args.q) {
-      throw new Error(`q is required in query() call`);
-    }
-    this._hub.update(fields.query(), args);
-  }
-
-  _query(args) {
-    // start a new session
-    this.restart();
-    const { session } = this;
-
-    // build payload and trigger request
-    const payload = this._buildPayload(args);
-    const event = mergeApiOptions(this._options.resolved.api, { payload, session });
-    this._request(event);
-  }
-
-  _buildPayload(args) {
-    return args;
-  }
-
-  _request(event) {
-    this._hub.update(fields.request(), event);
-  }
-
-  updateCompletions(event) {
-    // TODO: verify
-    this._hub.update(fields.data(DATA_ASPECT.AUTOCOMPLETE), {
-      ...event,
-      source: 'manual',
-    });
-    return this;
-  }
-
   notifyViewUpdate(role = ROLE.PRODUCTS, ...args) {
     super.notifyViewUpdate(role, ...args);
     return this;
   }
 
+  // destroy //
+  _destroy(options) {
+    this._feedback._destroy();
+    this._destroyAutocomplete();
+    super._destroy(options);
+  }
+
 }
 
-makeConfigurable(Search.prototype, ['autocomplete']);
+makeAutocompletable(Search.prototype);

package/src/workflow/use-link.js

@@ -0,0 +1,40 @@
+import { mixin } from '@miso.ai/commons';
+
+export function enableUseLink(prototype) {
+  mixin(prototype, UseLinkMixin.prototype);
+}
+
+export class UseLinkMixin {
+
+  useLink(fn, options = {}) {
+    if (typeof fn !== 'function' && fn !== false) {
+      throw new Error('useLink(fn) expects fn to be a function or false');
+    }
+    this._linkFn = fn ? [fn, options] : false;
+    return this;
+  }
+
+  _submitToPage(args = {}) {
+    if (!this._linkFn) {
+      return;
+    }
+    // TODO: we want a submit event
+    const url = this._getSubmitUrl(args);
+    const [_, options = {}] = this._linkFn;
+    if (options.open === false) {
+      window.location.href = url;
+    } else {
+      const target = options.target || '_blank';
+      const windowFeatures = options.windowFeatures || '';
+      window.open(url, target, windowFeatures);
+    }
+  }
+
+  _getSubmitUrl(args) {
+    if (!this._linkFn) {
+      throw new Error('useLink(fn) must be called before _getSubmitUrl()');
+    }
+    return this._linkFn[0](args.q);
+  }
+
+}

package/dist/cjs/actor/autocomplete.js

@@ -1,160 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _constants = require("../constants.js");
-var fields = _interopRequireWildcard(require("./fields.js"));
-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; }
-class AutocompleteActor {
-  constructor(hub, _ref) {
-    let {
-      source,
-      options
-    } = _ref;
-    this._hub = hub;
-    this._source = source;
-    this._options = options;
-    this._index = -1;
-
-    // TODO: listen to request:input instead
-    this._unsubscribes = [hub.on(fields.input(), () => this._sync()), options.on('autocomplete', () => this._syncOptions())];
-
-    // sync right away
-    this._sync(true);
-  }
-  get active() {
-    return this._options.resolved.autocomplete.actor !== false;
-  }
-  get source() {
-    return this._source;
-  }
-  _syncOptions() {
-    // TODO: explore scenarios where options.actor true -> false
-    this._sync(true);
-  }
-  async _sync() {
-    let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    // protocol: inactive -> no reaction
-    if (!this.active) {
-      return;
-    }
-    const {
-      input
-    } = this._hub.states;
-    const value = input && input.value && input.value.trim() || undefined;
-    if (sameInput(this._input, input) && !force) {
-      return;
-    }
-    this._input = input;
-    const index = ++this._index;
-
-    // new input, abort previous data fetch if any
-    this._clearTimeout();
-    this._abortPendingRequest({
-      type: 'new-input',
-      message: 'A new input renders previous autocomplete request obsolete.'
-    });
-
-    // emit loading/initial state
-    this._emitCompletions({
-      index,
-      input,
-      status: value ? _constants.STATUS.LOADING : _constants.STATUS.INITIAL
-    });
-    if (!value) {
-      return;
-    }
-    try {
-      const response = await this._fetchCompletions(input);
-      if (this._index !== index) {
-        return; // new results loading, discard this one
-      }
-      this._emitCompletions({
-        index,
-        input,
-        status: _constants.STATUS.READY,
-        value: response.completions
-      });
-    } catch (error) {
-      this._error(error);
-      if (this._index !== index) {
-        return; // ignore
-      }
-      this._emitCompletions({
-        index,
-        input,
-        status: _constants.STATUS.ERRONEOUS,
-        error
-      });
-    }
-  }
-  async _getCompletions(input) {
-    // TODO: cache
-    return await this._fetchCompletions(input);
-  }
-  async _fetchCompletions(_ref2) {
-    let {
-      value
-    } = _ref2;
-    // TODO: other options?
-    const {
-      api
-    } = this._options.resolved.autocomplete;
-    const {
-      group,
-      name
-    } = api;
-    const {
-      signal
-    } = this._ac || {};
-    const options = Object.assign({}, api.options, {
-      signal
-    });
-    const payload = Object.assign({}, api.payload, {
-      q: value
-    });
-    return await this._source({
-      group,
-      name,
-      payload,
-      options
-    });
-  }
-  _clearTimeout() {
-    if (this._timeoutId) {
-      clearTimeout(this._timeoutId);
-      this._timeoutId = undefined;
-    }
-  }
-  _abortPendingRequest(info) {
-    this._ac && this._ac.abort(info);
-    this._ac = new AbortController();
-  }
-  _emitCompletions(event) {
-    event.source = 'actor';
-    // TDOO: update response:autocomplete instead
-    this._hub.update(fields.data(_constants.DATA_ASPECT.AUTOCOMPLETE), event);
-  }
-  _error(error) {
-    // TODO
-    console.error(error);
-  }
-  _destroy() {
-    // abort ongoing data fetch if any
-    this._ac && this._ac.abort({
-      type: 'autocomplete-actor-destroy',
-      message: 'Autocomplete actor is destroyed.'
-    });
-    for (const unsubscribe of this._unsubscribes) {
-      unsubscribe();
-    }
-    this._unsubscribes = [];
-  }
-}
-exports.default = AutocompleteActor;
-function sameInput(a, b) {
-  return !a && !b || a && b && a.value === b.value;
-}