@miso.ai/client-sdk-ui 1.11.6-beta.0 → 1.11.6-beta.1

package/package.json

@@ -26,7 +26,7 @@
     "url": "https://github.com/MisoAI/miso-client-js-sdk/issues"
   },
   "dependencies": {
-    "@miso.ai/commons": "1.11.6-beta.0"
+    "@miso.ai/commons": "1.11.6-beta.1"
   },
-  "version": "1.11.6-beta.0"
+  "version": "1.11.6-beta.1"
 }

package/src/actor/filters.js

@@ -67,10 +67,12 @@ export default class Filters {
     this._events.emit('update', { updates, states, oldStates });
   }
 
-  reset() {
-    const oldStates = this.states;
+  reset({ silent = false } = {}) {
+    // TODO: review this
+    const oldStates = this._states;
     this._states = undefined;
     const states = this._getStates();
+    this._hub.update(fields.filters(), states, { silent });
     this._events.emit('reset', { states, oldStates });
   }
 

package/src/actor/hub.js

@@ -2,8 +2,9 @@ import { defineValues, EventEmitter } from '@miso.ai/commons';
 
 export default class Hub {
 
-  constructor() {
+  constructor(options = {}) {
     (this._events = new EventEmitter())._injectSubscribeInterface(this);
+    this._options = options;
     this._states = {};
     defineValues(this, {
       states: new Proxy(this._states, {
@@ -12,15 +13,35 @@ export default class Hub {
     });
   }
 
-  update(name, state, { silent = false } = {}) {
+  update(name, state, options = {}) {
     this._states[name] = Object.freeze(state);
-    if (!silent) {
+    const event = Object.freeze({ action: 'update', name, state, ...options });
+    // callback after update, before emit
+    if (typeof this._options.onUpdate === 'function') {
+      this._options.onUpdate(event);
+    }
+    // emit
+    if (!options.silent) {
       this._events.emit(name, state);
     }
+    // callback after emit
+    if (typeof this._options.onEmit === 'function') {
+      this._options.onEmit(event);
+    }
   }
 
-  trigger(name, event) {
-    this._events.emit(name, event);
+  trigger(name, state) {
+    const event = Object.freeze({ action: 'trigger', name, state });
+    // callback before emit
+    if (typeof this._options.onUpdate === 'function') {
+      this._options.onUpdate(event);
+    }
+    // emit
+    this._events.emit(name, state);
+    // callback after emit
+    if (typeof this._options.onEmit === 'function') {
+      this._options.onEmit(event);
+    }
   }
 
 }

package/src/element/container/miso-explore.js

@@ -1,19 +1,19 @@
-import MisoContainerElement from './miso-container.js';
+import MisoUnitElement from './miso-unit.js';
 
 const TAG_NAME = 'miso-explore';
 
-export default class MisoExploreElement extends MisoContainerElement {
-
-  static get observedAttributes() {
-    return MisoContainerElement.observedAttributes;
-  }
+export default class MisoExploreElement extends MisoUnitElement {
 
   static get tagName() {
     return TAG_NAME;
   }
 
-  _getWorkflow(client) {
-    return client.ui.explore;
+  static get observedAttributes() {
+    return MisoUnitElement.observedAttributes;
+  }
+
+  _getWorkflowByUnitId(client, unitId) {
+    return client.ui.explores.get(unitId);
   }
 
 }

package/src/element/container/miso-hybrid-search.js

@@ -4,14 +4,14 @@ const TAG_NAME = 'miso-hybrid-search';
 
 export default class MisoHybridSearchElement extends MisoContainerElement {
 
-  static get observedAttributes() {
-    return MisoContainerElement.observedAttributes;
-  }
-
   static get tagName() {
     return TAG_NAME;
   }
 
+  static get observedAttributes() {
+    return MisoContainerElement.observedAttributes;
+  }
+
   _getWorkflow(client) {
     return client.ui.hybridSearch;
   }

package/src/element/container/miso-recommendation.js

@@ -1,61 +1,19 @@
-import MisoContainerElement from './miso-container.js';
+import MisoUnitElement from './miso-unit.js';
 
 const TAG_NAME = 'miso-recommendation';
 
-const ATTR_UNIT_ID = 'unit-id';
-const OBSERVED_ATTRIBUTES = Object.freeze([
-  ...MisoContainerElement.observedAttributes,
-  ATTR_UNIT_ID,
-]);
-
-export default class MisoRecommendationElement extends MisoContainerElement {
+export default class MisoRecommendationElement extends MisoUnitElement {
 
   static get tagName() {
     return TAG_NAME;
   }
 
   static get observedAttributes() {
-    return OBSERVED_ATTRIBUTES;
-  }
-
-  _getWorkflow(client) {
-    return this._getWorkflowByUnitId(client, this.unitId);
+    return MisoUnitElement.observedAttributes;
   }
 
   _getWorkflowByUnitId(client, unitId) {
     return client.ui.recommendations.get(unitId);
   }
 
-  // properties //
-  get unitId() {
-    return this.getAttribute(ATTR_UNIT_ID) || undefined;
-  }
-
-  set unitId(value) {
-    value = value && `${value}`;
-    if (value) {
-      this.setAttribute(ATTR_UNIT_ID, value);
-    } else {
-      this.removeAttribute(ATTR_UNIT_ID);
-    }
-  }
-
-  // lifecycle //
-  attributeChangedCallback(attr, oldValue, newValue) {
-    switch (attr) {
-      case ATTR_UNIT_ID:
-        this._handleUnitIdUpdate(oldValue, newValue);
-        break;
-      default:
-        super.attributeChangedCallback(attr, oldValue, newValue);
-    }
-  }
-
-  _handleUnitIdUpdate(oldUnitId, newUnitId) {
-    if (oldUnitId === newUnitId || !this._client) {
-      return;
-    }
-    this._setWorkflow(this._getWorkflowByUnitId(this._client, newUnitId));
-  }
-
 }

package/src/element/container/miso-search.js

@@ -4,14 +4,14 @@ const TAG_NAME = 'miso-search';
 
 export default class MisoSearchElement extends MisoContainerElement {
 
-  static get observedAttributes() {
-    return MisoContainerElement.observedAttributes;
-  }
-
   static get tagName() {
     return TAG_NAME;
   }
 
+  static get observedAttributes() {
+    return MisoContainerElement.observedAttributes;
+  }
+
   _getWorkflow(client) {
     return client.ui.search;
   }

package/src/element/container/miso-unit.js

@@ -0,0 +1,55 @@
+import MisoContainerElement from './miso-container.js';
+
+const ATTR_UNIT_ID = 'unit-id';
+const OBSERVED_ATTRIBUTES = Object.freeze([
+  ...MisoContainerElement.observedAttributes,
+  ATTR_UNIT_ID,
+]);
+
+export default class MisoUnitElement extends MisoContainerElement {
+
+  static get observedAttributes() {
+    return OBSERVED_ATTRIBUTES;
+  }
+
+  _getWorkflow(client) {
+    return this._getWorkflowByUnitId(client, this.unitId);
+  }
+
+  _getWorkflowByUnitId(client, unitId) {
+    throw new Error('Not implemented');
+  }
+
+  // properties //
+  get unitId() {
+    return this.getAttribute(ATTR_UNIT_ID) || undefined;
+  }
+
+  set unitId(value) {
+    value = value && `${value}`;
+    if (value) {
+      this.setAttribute(ATTR_UNIT_ID, value);
+    } else {
+      this.removeAttribute(ATTR_UNIT_ID);
+    }
+  }
+
+  // lifecycle //
+  attributeChangedCallback(attr, oldValue, newValue) {
+    switch (attr) {
+      case ATTR_UNIT_ID:
+        this._handleUnitIdUpdate(oldValue, newValue);
+        break;
+      default:
+        super.attributeChangedCallback(attr, oldValue, newValue);
+    }
+  }
+
+  _handleUnitIdUpdate(oldUnitId, newUnitId) {
+    if (oldUnitId === newUnitId || !this._client) {
+      return;
+    }
+    this._setWorkflow(this._getWorkflowByUnitId(this._client, newUnitId));
+  }
+
+}

package/src/layout/radio/radio.js

@@ -50,6 +50,7 @@ export default class RadioLayout extends TemplateBasedLayout {
       view.hub.on(this._field, () => this._refresh()),
       proxyElement.on('click', (e) => this._handleClick(e)),
     ];
+    // TODO: it shall not carry the responsibility of setting default value
     this._defaultValue ? this._select(this._defaultValue, { silent: true }) : this._clear({ silent: true });
   }
 

package/src/layout/templates.js

@@ -100,8 +100,9 @@ export function imageInfoBlock(layout, data, meta) {
   ].join('')}</div>`;
 }
 
-export function titleBlock({ className }, { title }) {
-  return title ? `<div class="${className}__item-title">${escapeHtml(title)}</div>` : '';
+export function titleBlock({ className }, { title, _title_with_markups }) {
+  const text = _title_with_markups || escapeHtml(title);
+  return text ? `<div class="${className}__item-title">${text}</div>` : '';
 }
 
 export function brandBlock({ className }, { brand, brand_logo }) {

package/src/plugin.js

@@ -1,5 +1,5 @@
 import { Component, Resolution, defineAndUpgrade, delegateGetters, defineValues } from '@miso.ai/commons';
-import { Asks, HybridSearch, Explore, Search, Recommendations } from './workflow/index.js';
+import { Asks, HybridSearch, Explores, Search, Recommendations } from './workflow/index.js';
 import { AskCombo } from './combo/index.js';
 import Layouts from './layouts.js';
 import * as elements from './element/index.js';
@@ -23,6 +23,7 @@ export default class UiPlugin extends Component {
     super('ui');
     this.layouts = new Layouts(this);
     this._recommendations = new WeakMap();
+    this._explores = new WeakMap();
     this._asks = new WeakMap();
     this._extensions = new WeakMap();
     this._ready = new Resolution();
@@ -114,6 +115,14 @@ export default class UiPlugin extends Component {
     return recommendations;
   }
 
+  _getExplores(client) {
+    let explores = this._explores.get(client);
+    if (!explores) {
+      this._explores.set(client, explores = new Explores(this, client));
+    }
+    return explores;
+  }
+
   _getAsks(client) {
     let asks = this._asks.get(client);
     if (!asks) {
@@ -180,8 +189,12 @@ class Ui {
     return this._hybridSearch || (this._hybridSearch = new HybridSearch(this._plugin, this._client));
   }
 
+  get explores() {
+    return this._explores || (this._explores = this._plugin._getExplores(this._client));
+  }
+
   get explore() {
-    return this._explore || (this._explore = new Explore(this._plugin, this._client));
+    return this.explores.get(); // get default explore unit
   }
 
   get ready() {

package/src/version.js

@@ -1 +1 @@
-export default '1.11.6-beta.0';
+export default '1.11.6-beta.1';

package/src/workflow/autocomplete.js

@@ -107,6 +107,7 @@ export default class Autocomplete extends Workflow {
   }
 
   _updateCompletions(data) {
+    // TODO: session is different
     this._superworkflow.updateCompletions(data);
   }
 

package/src/workflow/base.js

@@ -6,24 +6,6 @@ import { ContainerLayout, ErrorLayout } from '../layout/index.js';
 import { WorkflowOptions, mergeApiOptions, makeConfigurable } from './options/index.js';
 import { getRevision, writeDataStatus, writeMisoIdToMeta, buildBaseInteraction, writeAffiliationInfoToInteraction, mergeInteraction } from './processors.js';
 
-// TODO: just bury this into hub
-function injectLogger(hub, callback) {
-  const { update, trigger } = hub;
-  hub.update = (name, state, options) => {
-    const result = update.call(hub, name, state, options);
-    if (!options || !options.silent) {
-      callback('update', name, state, options);
-    }
-    return result;
-  }
-  hub.trigger = (...args) => {
-    const result = trigger.apply(hub, args);
-    callback('trigger', ...args);
-    return result;
-  }
-  return hub;
-}
-
 const DEFAULT_API_OPTIONS = Object.freeze({});
 
 const DEFAULT_LAYOUTS = Object.freeze({
@@ -62,9 +44,14 @@ export default class Workflow extends Component {
     this._extensions = plugin._getExtensions(client);
     this._defaults = defaults;
     this._options = options || new WorkflowOptions(context && context._options, defaults);
-    this._hub = injectLogger(new Hub(), (...args) => this._log(...args));
+    this._hub = new Hub({
+      onUpdate: event => this._onHubUpdate(event),
+      onEmit: event => this._onHubEmit(event),
+    });
     this._sessionContext = new WeakMap();
 
+    client._events.emit('workflow', this);
+
     this._initProperties(args);
     this._initActors(args);
     this._initSubscriptions(args);
@@ -108,8 +95,25 @@ export default class Workflow extends Component {
     return context;
   }
 
+  // hub //
+  _onHubUpdate(event) {
+    this._runCallbacks(this._client.meta.parent._hubUpdateCallbacks, event);
+  }
+
+  _onHubEmit(event) {
+    this._runCallbacks(this._client.meta.parent._hubEmitCallbacks, event);
+    this._emitAsWorkflowEvent(event);
+  }
+
+  _emitAsWorkflowEvent({ action: _action, name, state, silent }) {
+    if (!silent) {
+      this._emit(name, { _action, ...state });
+    }
+  }
+
   // properties //
   get uuid() {
+    // TODO: review this
     return this.session && this.session.uuid;
   }
 
@@ -319,14 +323,20 @@ export default class Workflow extends Component {
   }
 
   // helper //
-  _log(action, name, data) {
-    this._emit(name, { _action: action, ...data });
+  _runCallbacks(callbacks, event) {
+    for (const callback of callbacks) {
+      try {
+        callback({ workflow: this, ...event });
+      } catch(e) {
+        this._error(e);
+      }
+    }
   }
 
   _emit(name, data) {
-    this._events.emit(name, data);
+    this._events.emit(name, { _event: name, ...data });
     if (this._context) {
-      this._context._events.emit(name, { workflow: this, ...data });
+      this._context._events.emit(name, { workflow: this, _event: name, ...data });
     }
   }
 

package/src/workflow/explore.js

@@ -1,5 +1,5 @@
 import { API } from '@miso.ai/commons';
-import Workflow from './base.js';
+import UnitWorkflow from './unit.js';
 import { fields } from '../actor/index.js';
 import { ROLE, EVENT_TYPE } from '../constants.js';
 import { ListLayout, SearchBoxLayout } from '../layout/index.js';
@@ -7,19 +7,19 @@ import { mergeRolesOptions, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
 import { enableUseLink, UseLinkMixin } from './use-link.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
-  ...Workflow.DEFAULT_API_OPTIONS,
+  ...UnitWorkflow.DEFAULT_API_OPTIONS,
   group: API.GROUP.ASK,
   name: API.NAME.RELATED_QUESTIONS,
 });
 
 const DEFAULT_LAYOUTS = Object.freeze({
-  ...Workflow.DEFAULT_LAYOUTS,
+  ...UnitWorkflow.DEFAULT_LAYOUTS,
   [ROLE.RELATED_QUESTIONS]: [ListLayout.type, { itemType: 'question', link: { rel: 'noopener nofollow' } }],
   [ROLE.QUERY]: [SearchBoxLayout.type, { placeholder: 'Ask a question' }],
 });
 
 const DEFAULT_TRACKERS = Object.freeze({
-  ...Workflow.DEFAULT_TRACKERS,
+  ...UnitWorkflow.DEFAULT_TRACKERS,
   [ROLE.RELATED_QUESTIONS]: DEFAULT_TRACKER_OPTIONS,
   [ROLE.CONTAINER]: {
     ...DEFAULT_TRACKER_OPTIONS,
@@ -33,26 +33,26 @@ const DEFAULT_TRACKERS = Object.freeze({
 });
 
 const DEFAULT_OPTIONS = Object.freeze({
-  ...Workflow.DEFAULT_OPTIONS,
+  ...UnitWorkflow.DEFAULT_OPTIONS,
   api: DEFAULT_API_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS,
 });
 
-const ROLES_OPTIONS = mergeRolesOptions(Workflow.ROLES_OPTIONS, {
+const ROLES_OPTIONS = mergeRolesOptions(UnitWorkflow.ROLES_OPTIONS, {
   main: ROLE.RELATED_QUESTIONS,
   members: Object.keys(DEFAULT_LAYOUTS),
 });
 
-export default class Explore extends Workflow {
+export default class Explore extends UnitWorkflow {
 
-  constructor(plugin, client) {
+  constructor(context, id) {
     super({
       name: 'explore',
-      plugin,
-      client,
+      context,
       roles: ROLES_OPTIONS,
       defaults: DEFAULT_OPTIONS,
+      id,
     });
   }
 
@@ -79,12 +79,13 @@ export default class Explore extends Workflow {
     });
   }
 
-  useApi(options) {
+  useApi(...args) {
+    const options = (typeof args[0] === 'object' ? args[0] : args[1]) || {};
     const { product_id } = options;
     if (product_id) {
       this._productId = product_id;
     }
-    return super.useApi(options);
+    return super.useApi(...args);
   }
 
   useLink(fn, options) {

package/src/workflow/explores.js

@@ -0,0 +1,14 @@
+import UnitWorkflowContext from './units.js';
+import Explore from './explore.js';
+
+export default class Explores extends UnitWorkflowContext {
+
+  constructor(plugin, client) {
+    super('explores', plugin, client);
+  }
+
+  _create(unitId) {
+    return new Explore(this, unitId);
+  }
+
+}

package/src/workflow/hybrid-search-answer.js

@@ -36,7 +36,7 @@ export default class HybridSearchAnswer extends AnswerBasedWorkflow {
     super.restart();
     // cascade restart to the sibling
     const results = this._superworkflow._results;
-    results._views.filters.reset();
+    results._views.filters.reset({ silent: true });
     results.restart();
     this._resultsSession = results.session; // keep track of the session
   }

package/src/workflow/index.js

@@ -1,5 +1,5 @@
 export { default as Asks } from './asks.js';
 export { default as HybridSearch } from './hybrid-search.js';
-export { default as Explore } from './explore.js';
 export { default as Search } from './search.js';
 export { default as Recommendations } from './recommendations.js';
+export { default as Explores } from './explores.js';

package/src/workflow/processors.js

@@ -175,10 +175,10 @@ export function concatItemsFromMoreResponse(oldData, newData, { role = ROLE.PROD
   // use old values of facet_counts and total, for they are affected by product_id exclusion
   return {
     ...newData,
-    facet_counts,
-    total,
     value: {
       ...newData.value,
+      facet_counts,
+      total,
       [role]: [...oldProducts, ...newProducts],
     },
   }

package/src/workflow/recommendation.js

@@ -1,43 +1,42 @@
-import { defineValues, API } from '@miso.ai/commons';
-import Workflow from './base.js';
+import { API } from '@miso.ai/commons';
+import UnitWorkflow from './unit.js';
 import { ListLayout } from '../layout/index.js';
 import { ROLE } from '../constants.js';
 import { mergeRolesOptions, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
-import { mergeInteraction } from './processors.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
-  ...Workflow.DEFAULT_API_OPTIONS,
+  ...UnitWorkflow.DEFAULT_API_OPTIONS,
   group: API.GROUP.RECOMMENDATION,
   name: API.NAME.USER_TO_PRODUCTS,
   payload: {
-    ...Workflow.DEFAULT_API_OPTIONS.payload,
+    ...UnitWorkflow.DEFAULT_API_OPTIONS.payload,
     fl: ['*'],
   },
 });
 
 const DEFAULT_LAYOUTS = Object.freeze({
-  ...Workflow.DEFAULT_LAYOUTS,
+  ...UnitWorkflow.DEFAULT_LAYOUTS,
   [ROLE.PRODUCTS]: ListLayout.type,
 });
 
 const DEFAULT_TRACKERS = Object.freeze({
-  ...Workflow.DEFAULT_TRACKERS,
+  ...UnitWorkflow.DEFAULT_TRACKERS,
   [ROLE.PRODUCTS]: DEFAULT_TRACKER_OPTIONS,
 });
 
 const DEFAULT_OPTIONS = Object.freeze({
-  ...Workflow.DEFAULT_OPTIONS,
+  ...UnitWorkflow.DEFAULT_OPTIONS,
   api: DEFAULT_API_OPTIONS,
   layouts: DEFAULT_LAYOUTS,
   trackers: DEFAULT_TRACKERS,
 });
 
-const ROLES_OPTIONS = mergeRolesOptions(Workflow.ROLES_OPTIONS, {
+const ROLES_OPTIONS = mergeRolesOptions(UnitWorkflow.ROLES_OPTIONS, {
   main: ROLE.PRODUCTS,
   members: Object.keys(DEFAULT_LAYOUTS),
 });
 
-export default class Recommendation extends Workflow {
+export default class Recommendation extends UnitWorkflow {
 
   constructor(context, id) {
     super({
@@ -49,17 +48,6 @@ export default class Recommendation extends Workflow {
     });
   }
 
-  _initProperties(args) {
-    super._initProperties(args);
-    const { id } = args;
-    defineValues(this, { id });
-  }
-
-  _initSession(args) {
-    this._context._members.set(args.id, this);
-    super._initSession(args);
-  }
-
   // lifecycle //
   start() {
     // in recommendation workflow, start() triggers query
@@ -72,30 +60,4 @@ export default class Recommendation extends Workflow {
     return this;
   }
 
-  // interactions //
-  _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: {
-        custom_context: {
-          unit_id,
-          unit_instance_uuid,
-        },
-      },
-    });
-  }
-
-  // destroy //
-  _destroy(options) {
-    this._context._members.delete(this.id);
-    super._destroy(options);
-  }
-
 }