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

package/src/workflow/processors.js

@@ -1,10 +1,15 @@
 import { trimObj } from '@miso.ai/commons';
-import { STATUS } from '../constants.js';
+import { STATUS, ROLE, EVENT_TYPE, isPerformanceEventType, isProductRole } from '../constants.js';
+
+// data //
+export function getRevision(data) {
+  return data && data.value && data.value.revision;
+}
 
 export function writeDataStatus(data) {
   const status = getStatus(data);
-  const ongoing = status === STATUS.READY ? !!data.ongoing : undefined;
-  return trimObj({ ...data, status, ongoing });
+  const ongoing = status === STATUS.READY ? data.ongoing : undefined;
+  return trimObj({ status, ongoing, ...data }); // let orinigal data override status and ongoing
 }
 
 function getStatus(data) {
@@ -35,7 +40,8 @@ export function writeMisoIdToMeta(data) {
 
 export function writeKeywordsToData(data) {
   const { request, value } = data;
-  if (!request || !value) {
+  // we still want the value in loading status
+  if (!request) {
     return data;
   }
   const { payload } = request || {};
@@ -73,23 +79,168 @@ export function writeAnswerStageToMeta(data) {
   };
 }
 
-export function addDataInstructions(data, instructions) {
-  if (!instructions) {
+export function writeFiltersToPayload(payload = {}, filters) {
+  return trimObj({
+    ...payload,
+    ...composeFiltersPayload(filters),
+  });
+}
+
+function composeFiltersPayload(filters) {
+  if (!filters) {
+    return undefined;
+  }
+  const { facets } = filters;
+  return trimObj({
+    facet_filters: composeFacetFilters(facets),
+  });
+}
+
+function composeFacetFilters(facets) {
+  if (!facets) {
+    return undefined;
+  }
+  const filters = {};
+  for (const field in facets) {
+    const values = facets[field];
+    if (!values || !values.length) {
+      continue; // just in case
+    }
+    filters[field] = {
+      terms: values,
+    };
+  }
+  return Object.keys(filters).length ? filters : undefined;
+}
+
+export function retainFacetCounts(data, currentFacetCounts) {
+  if (!currentFacetCounts) {
+    return data;
+  }
+  const { status, value } = data;
+  switch (status) {
+    case STATUS.INITIAL:
+    case STATUS.LOADING:
+      break;
+    default:
+      return data;
+  }
+  if (value && value.facet_counts) {
     return data;
   }
   return {
-    _inst: {
-      ...data._inst,
-      ...instructions,
-    },
     ...data,
+    value: {
+      ...value,
+      facet_counts: currentFacetCounts,
+    },
   };
 }
 
-export function removeDataInstructions(data) {
-  if (typeof data !== 'object') {
+export function concatResults(oldData, newData, { role = ROLE.PRODUCTS } = {}) {
+  if (!newData.value) {
+    return oldData;
+  }
+  const { [role]: oldProducts = [] } = oldData.value;
+  const { [role]: newProducts = [] } = newData.value;
+  // keep exhaustion flag
+  // TODO
+  return {
+    ...newData,
+    value: {
+      ...newData.value,
+      [role]: [...oldProducts, ...newProducts],
+    },
+  }
+}
+
+export function markExhaustion(data, { role = ROLE.PRODUCTS } = {}) {
+  const { status, request, value } = data;
+  // keep track of the exhaustion state
+  if (status !== STATUS.READY || !request || !value) {
     return data;
   }
-  const { _inst, ...rest } = data;
-  return rest;
+  const { [role]: products } = value;
+  if (!products) {
+    return data;
+  }
+  const { rows } = request.payload;
+  const { length } = products;
+  const exhausted = length < rows;
+  if (!exhausted) {
+    return data;
+  }
+  return {
+    ...data,
+    meta: {
+      ...data.meta,
+      exhausted: true,
+    },
+  };
+}
+
+// interactions //
+export function buildBaseInteraction(args) {
+  const { role, type, items } = args;
+  const payload = {
+    type: type === 'viewable' ? 'viewable_impression' : type,
+    context: {
+      custom_context: trimObj({
+        property: role,
+      }),
+    },
+  };
+
+  if (isPerformanceEventType(type)) {
+    if (isProductRole(role)) {
+      payload.product_ids = (items || []).map(v => typeof v === 'string' ? v : v.product_id).filter(v => v);
+    } else {
+      payload.product_ids = [];
+      payload.context.custom_context.items = (items || []).map(v => v.text || v.id || v);
+    }
+  }
+
+  switch (type) {
+    case EVENT_TYPE.SUBMIT:
+      payload.context.custom_context.value = args.value;
+      break;
+    case EVENT_TYPE.FEEDBACK:
+      payload.context.custom_context.value = payload.value = args.value;
+      payload.context.custom_context.result_type = payload.result_type = args.result_type;
+      break;
+  }
+
+  return trimObj(payload);
+}
+
+export function writeAffiliationInfoToInteraction(payload, args) {
+  if (args.role !== ROLE.AFFILIATION) {
+    return payload;
+  }
+  const { items } = args;
+  const channel = (items[0] && items[0].channel) || undefined;
+  const positions = items.map(v => v.position);
+  return mergeInteraction(payload, {
+    context: {
+      custom_context: {
+        channel,
+        positions,
+      },
+    },
+  });
+}
+
+export function mergeInteraction(base = {}, patch = {}) {
+  return trimObj({
+    ...base,
+    ...patch,
+    context:trimObj({
+      ...base.context,
+      ...patch.context,
+      custom_context: trimObj({
+        ...(base.context && base.context.custom_context),
+        ...(patch.context && patch.context.custom_context),
+      }),
+    }),
+  });
 }

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,183 @@
+import { API } from '@miso.ai/commons';
+import Workflow from './base.js';
+import { fields } from '../actor/index.js';
+import { ROLE } from '../constants.js';
+import { SearchBoxLayout, ListLayout, TextLayout, FacetsLayout, MoreButtonLayout } from '../layout/index.js';
+import { writeKeywordsToData, writeFiltersToPayload, retainFacetCounts, markExhaustion, concatResults } 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);
+  }
+
+  // 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 (this.exhausted || this._page >= DEFAULT_PAGE_LIMIT - 1) {
+      return; // ignore
+    }
+    // don't create a new session!
+
+    // payload
+    const query = this._getQuery();
+    const filters = this._hub.states[fields.filters()]; // get stored filters
+    const start = (this._page + 1) * this._getPageSize();
+    const payload = this._buildPayload({ ...query, filters, start });
+
+    this._request({ payload });
+
+    this._page++;
+  }
+
+  _getQuery() {
+    return this._queryArgs;
+  }
+
+  _getPageSize() {
+    return this._options.resolved.api.payload.rows;
+  }
+
+  _buildPayload({ filters, ...payload } = {}) {
+    payload = writeFiltersToPayload(payload, filters);
+    return payload;
+  }
+
+  // data //
+  _defaultProcessData(data) {
+    data = super._defaultProcessData(data);
+    data = writeKeywordsToData(data);
+    data = retainFacetCounts(data, this._currentFacetCounts);
+    data = markExhaustion(data);
+    return data;
+  }
+
+  _updateDataInHub(data) {
+    data = this._appendResultsFromMoreRequest(data);
+    super._updateDataInHub(data);
+  }
+
+  _appendResultsFromMoreRequest(data) {
+    const { request } = data;
+    if (!request || !request.payload.start) {
+      return data; // the initial state, or not from "more" request
+    }
+    // concat records if it's from "more" request
+    const currentData = this._hub.states[fields.data()];
+    return concatResults(currentData, data);
+  }
+
+}
+
+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);