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

package/src/actor/view.js

@@ -97,13 +97,17 @@ export default class ViewActor {
     }
     if (!this._tracker) {
       const { hub } = this;
-      this._tracker = new Tracker({ hub, role, options: () => this._getTrackerOptions() });
+      this._tracker = new Tracker({ hub, role });
     }
     return this._tracker;
   }
   
   get workflowOptions() {
-    return this._views._getWorkflowOptions();
+    return this._views._options.resolved;
+  }
+
+  get trackerOptions() {
+    return this._views._getTrackerOptions(this.role);
   }
 
   get filters() {
@@ -154,15 +158,10 @@ export default class ViewActor {
     this.hub.update(fields.view(role), state, { silent });
   }
 
-  _getTrackerOptions() {
-    // used by tracker to expose tracker options to layout
-    return this._views._getTrackerOptions(this.role);
-  }
-
   _sliceData(data) {
     const { value, error, status, meta, ...rest } = data;
     const sliced = {
-      value: this._mapping(data),
+      value: this._mapping(data, this),
       status,
       data: value,
       meta,

package/src/actor/views.js

@@ -44,15 +44,9 @@ export default class ViewsActor {
     this._unsubscribes = [
       () => window.removeEventListener('resize', syncSize),
       hub.on(fields.data(), data => this.refresh({ data })),
-      options.on('autocomplete', () => this._syncAutocompleteOptions()),
-      options.on('pagination', () => this._syncPaginationOptions()),
-      options.on('trackers', () => this._syncTrackers()),
       options.on('layouts', () => this._syncLayouts()),
     ];
 
-    this._syncAutocompleteOptions();
-    this._syncPaginationOptions();
-    this._syncTrackers();
     this._syncLayouts();
   }
 
@@ -150,13 +144,16 @@ export default class ViewsActor {
     } else {
       for (let [role, [name, options]] of Object.entries(layouts)) {
         // TODO: try to omit if unchanged
-        const fn = () => this._layoutFactory.create(name, { ...options, role, workflow: this._workflowName, workflowOptions: this._getWorkflowOptions() });
+        const fn = () => this._layoutFactory.create(name, { ...options, role, workflow: this._workflowName });
         if (role === ROLE.CONTAINER) {
           for (const view of this._containers.values()) {
             view.layout = fn();
           }
         } else {
-          this.get(role).layout = fn();
+          const view = this.get(role);
+          if (view) {
+            view.layout = fn();
+          }
         }
       }
     }
@@ -168,11 +165,11 @@ export default class ViewsActor {
       return undefined;
     }
     const [name, options] = args;
-    return this._layoutFactory.create(name, { ...options, role, workflow: this._workflowName, workflowOptions: this._getWorkflowOptions() });
+    return this._layoutFactory.create(name, { ...options, role, workflow: this._workflowName });
   }
 
   get(role) {
-    return this._views[role] || (this._views[role] = new ViewActor(this, role));
+    return this._views[role];
   }
 
   get views() {
@@ -218,12 +215,9 @@ export default class ViewsActor {
     return data || this._hub.states[fields.data()];
   }
 
-  _syncTrackers() {
-    this._trackerOptions = this._options.resolved.trackers;
-  }
-
   _getTrackerOptions(role) {
-    return normalizeTrackerOptions((this._trackerOptions && this._trackerOptions[role]) || false);
+    const allTrackerOptions = this._options.resolved.trackers;
+    return normalizeTrackerOptions((allTrackerOptions && allTrackerOptions[role]) || false);
   }
 
   _getContainerTracker() {
@@ -235,21 +229,6 @@ export default class ViewsActor {
     return this._containerTracker;
   }
 
-  _syncAutocompleteOptions() {
-    this._autocompleteOptions = this._options.resolved.autocomplete;
-  }
-
-  _syncPaginationOptions() {
-    this._paginationOptions = this._options.resolved.pagination;
-  }
-
-  _getWorkflowOptions() {
-    return trimObj({
-      autocomplete: this._autocompleteOptions,
-      pagination: this._paginationOptions,
-    });
-  }
-
   _error(e) {
     // TODO: hub trigger error event
     console.error(e);

package/src/constants.js

@@ -24,6 +24,7 @@ export const ROLE = Object.freeze({
   FACETS: 'facets',
   TOTAL: 'total',
   MORE: 'more',
+  SORT: 'sort',
   ERROR: 'error',
 });
 
@@ -114,3 +115,13 @@ export function validateTrackingStatus(value) {
     throw new Error(`Unrecognized tracking status: ${value}`);
   }
 }
+
+export const WORKFLOW_CONFIGURABLE = Object.freeze({
+  API: 'api',
+  LAYOUTS: 'layouts',
+  DATA_PROCESSOR: 'dataProcessor',
+  TRACKERS: 'trackers',
+  INTERACTIONS: 'interactions',
+  FILTERS: 'filters',
+  PAGINATION: 'pagination',
+});

package/src/element/role/index.js

@@ -14,4 +14,5 @@ export { default as MisoKeywordsElement } from './miso-keywords.js';
 export { default as MisoTotalElement } from './miso-total.js';
 export { default as MisoFacetsElement } from './miso-facets.js';
 export { default as MisoMoreElement } from './miso-more.js';
+export { default as MisoSortElement } from './miso-sort.js';
 export { default as MisoErrorElement } from './miso-error.js';

package/src/element/role/miso-sort.js

@@ -0,0 +1,16 @@
+import MisoComponentElement from './miso-component.js';
+import { ROLE } from '../../constants.js';
+
+export default class MisoSortElement extends MisoComponentElement {
+
+  constructor() {
+    super({
+      role: ROLE.SORT,
+    });
+  }
+
+  static get tagName() {
+    return 'miso-sort';
+  }
+
+}

package/src/layout/affiliation/affiliation.js

@@ -165,7 +165,7 @@ export default class AffiliationLayout extends CollectionLayout {
 
   initialize(view) {
     super.initialize(view);
-    const { viewable: options } = this._view.tracker.options || {};
+    const { viewable: options } = this._view.trackerOptions || {};
     this._viewable = new CarouselItemViewabilityObserver(this._onViewable.bind(this), options);
   }
 

package/src/layout/container/container.js

@@ -82,7 +82,7 @@ export default class ContainerLayout extends RafLayout {
   }
 
   _trackImpression() {
-    const { impression: options } = this._view.tracker.options || {};
+    const { impression: options } = this._view.trackerOptions || {};
     if (!options) {
       return;
     }
@@ -94,7 +94,7 @@ export default class ContainerLayout extends RafLayout {
   }
 
   async _trackViewable(element) {
-    const { viewable: options } = this._view.tracker.options || {};
+    const { viewable: options } = this._view.trackerOptions || {};
     if (!options) {
       return;
     }

package/src/layout/index.js

@@ -13,4 +13,5 @@ export { default as TextLayout } from './text/text.js';
 export { default as TypewriterLayout } from './text/typewriter/index.js';
 export { default as AffiliationLayout } from './affiliation/affiliation.js';
 export { default as FacetsLayout } from './input/facets.js';
+export { default as SelectLayout } from './input/select.js';
 export { default as MoreButtonLayout } from './button/more-button.js';

package/src/layout/input/facets.js

@@ -1,4 +1,5 @@
 import { escapeHtml } from '@miso.ai/commons';
+import { fields } from '../../actor/index.js';
 import TemplateBasedLayout from '../template.js';
 import Bindings from '../../util/bindings.js';
 
@@ -109,7 +110,7 @@ export default class FacetsLayout extends TemplateBasedLayout {
   }
 
   initialize(view) {
-    const { proxyElement, hub, filters } = view;
+    const { proxyElement, filters } = view;
     this._unsubscribes = [
       ...this._unsubscribes,
       proxyElement.on('click', (e) => this._handleClick(e)),
@@ -132,7 +133,7 @@ export default class FacetsLayout extends TemplateBasedLayout {
   }
 
   _syncSelections() {
-    const selectedValues = getSelectedValues(this._view.filters.states.facets);
+    const selectedValues = getSelectedValues(this._view.hub.states[fields.filters()].facets);
     for (const { value: { field, value }, element } of this._bindings.entries) {
       this._setSelected(element, selectedValues[field] && selectedValues[field].has(value));
     }

package/src/layout/input/search-box.js

@@ -338,7 +338,7 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
   }
 
   _trackSubmit(value) {
-    const { [EVENT_TYPE.SUBMIT]: options } = this._view.tracker.options || {};
+    const { [EVENT_TYPE.SUBMIT]: options } = this._view.trackerOptions || {};
     if (!options) {
       return;
     }

package/src/layout/input/select.js

@@ -0,0 +1,142 @@
+import { escapeHtml, kebabOrSnakeToHuman } from '@miso.ai/commons';
+import TemplateBasedLayout from '../template.js';
+import { makeTrackable } from '../trackable.js';
+
+const TYPE = 'select';
+const DEFAULT_CLASSNAME = 'miso-select';
+
+function root(layout, state) {
+  const { className, role, templates } = layout;
+  const roleAttr = role ? `data-role="${role}"` : '';
+  const values = layout._getItems(state);
+  const selected = values.find(value => value.selected) || values[0];
+  return `
+<div class="${className}" ${roleAttr}>
+  ${templates.button(layout, selected)}
+  ${templates.options(layout, state)}
+</div>`;
+}
+
+function button(layout, value) {
+  const { className, templates } = layout;
+  return `<button class="${className}__button" data-role="button" tabindex="0">${templates.text(layout, value)}</button>`;
+}
+
+function options(layout, state) {
+  const { className, templates } = layout;
+  const values = layout._getItems(state);
+  return `<ul class="${className}__options">${values.map((value, index) => templates.option(layout, value, { index })).join('')}</ul>`;
+}
+
+function option(layout, value) {
+  const { className, templates } = layout;
+  const selectedClass = value.selected ? 'selected' : '';
+  return `<li class="${className}__option ${selectedClass}" data-role="option" tabindex="0">${templates.text(layout, value)}</li>`;
+}
+
+function text(layout, value) {
+  return escapeHtml(value && value.text && kebabOrSnakeToHuman(value.text) || value || '');
+}
+
+const DEFAULT_TEMPLATES = Object.freeze({
+  root,
+  button,
+  options,
+  option,
+  text,
+});
+
+export default class SelectLayout extends TemplateBasedLayout {
+
+  static get type() {
+    return TYPE;
+  }
+
+  static get defaultTemplates() {
+    return DEFAULT_TEMPLATES;
+  }
+
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+
+  constructor({ className = DEFAULT_CLASSNAME, templates, ...options } = {}) {
+    super({
+      className,
+      templates: { ...DEFAULT_TEMPLATES, ...templates },
+      ...options,
+    });
+    this._initTrackable();
+  }
+
+  initialize(view) {
+    const { proxyElement } = view;
+    this._unsubscribes = [
+      ...this._unsubscribes,
+      proxyElement.on('click', (e) => this._handleClick(e)),
+    ];
+  }
+
+  _afterRender(element, state) {
+    this._syncBindings(element, state);
+
+  }
+
+  _unrender() {
+    this._clearBindings();
+  }
+
+  _getItems(state) {
+    return state.value || [];
+  }
+
+  _getOptionsElement(element) {
+    return element.querySelector(`[data-role="options"]`);
+  }
+
+  _getItemElements(element) {
+    return element ? Array.from(element.querySelectorAll(`[data-role="option"]`)) : [];
+  }
+
+  _handleClick(event) {
+    if (!this._element) {
+      return;
+    }
+    for (let element = event.target; element && element !== this._element; element = element.parentElement) {
+      const { role } = element.dataset;
+      switch (role) {
+        case 'button':
+          this._toggle();
+          break;
+        case 'option':
+          const binding = this._bindings.get(element);
+          this._select(binding && binding.value);
+          break;
+      }
+    }
+  }
+
+  _toggle() {
+    if (!this._element) {
+      return;
+    }
+    const child = this._element.children[0];
+    child && child.classList.toggle('open');
+  }
+
+  async _select(value) {
+    if (!value) {
+      return;
+    }
+    // TODO: reflect selection right away
+    this._view._events.emit('select', { value });
+  }
+
+  destroy() {
+    this._destroyTrackable();
+    super.destroy();
+  }
+
+}
+
+makeTrackable(SelectLayout.prototype);

package/src/layout/raf.js

@@ -2,8 +2,8 @@ import { defineValues, requestAnimationFrame as raf, capture } from '@miso.ai/co
 
 export default class RafLayout {
 
-  constructor({ role, workflow, workflowOptions, ...options } = {}) {
-    defineValues(this, { role, workflow, workflowOptions, options });
+  constructor({ role, workflow, ...options } = {}) {
+    defineValues(this, { role, workflow, options });
     this._unsubscribes = [];
     this._rendered = new WeakMap();
     this._element = undefined;

package/src/layout/trackable.js

@@ -51,7 +51,7 @@ export class TrackableMixin {
     if (entries.length === 0) {
       return;
     }
-    const { impression: options } = this._view.tracker.options || {};
+    const { impression: options } = this._view.trackerOptions || {};
     if (!options) {
       return;
     }
@@ -68,7 +68,7 @@ export class TrackableMixin {
     if (entries.length === 0) {
       return;
     }
-    const { viewable: options } = this._view.tracker.options || {};
+    const { viewable: options } = this._view.trackerOptions || {};
     if (!options) {
       return;
     }
@@ -78,7 +78,7 @@ export class TrackableMixin {
   }
 
   _trackClick(event, binding) {
-    const { click: options } = this._view.tracker.options || {};
+    const { click: options } = this._view.trackerOptions || {};
     if (validateClick(options, event, binding)) {
       this._view.tracker.click([binding.value]);
     }

package/src/layout/triggerable.js

@@ -16,7 +16,7 @@ export class TriggerableMixin {
     if (!this.options.infiniteScroll) {
       return;
     }
-    const workflowPaginationOptions = this.workflowOptions.pagination;
+    const workflowPaginationOptions = this._view.workflowOptions.pagination;
     if (!workflowPaginationOptions.active || workflowPaginationOptions.mode !== 'infiniteScroll') {
       return;
     }

package/src/util/trackers.js

@@ -1,5 +1,7 @@
 import { findInAncestors, trimObj } from '@miso.ai/commons';
 
+// TODO: think about how to incorporate this with workflow options
+
 const DEFAULT_TRACKER_OPTIONS = Object.freeze({
   impression: Object.freeze({
   }),

package/src/version.js

@@ -1 +1 @@
-export default '1.11.4-beta.1';
+export default '1.11.4-beta.3';

package/src/workflow/answer-based.js

@@ -4,7 +4,7 @@ import { fields, FeedbackActor } from '../actor/index.js';
 import { ROLE, STATUS, ORGANIC_QUESTION_SOURCE } from '../constants.js';
 import { SearchBoxLayout, TextLayout, ListLayout, TypewriterLayout, FeedbackLayout, AffiliationLayout } from '../layout/index.js';
 import { processData as processAffiliationData } from '../affiliation/index.js';
-import { mergeRolesOptions } from './options.js';
+import { mergeRolesOptions } from './options/index.js';
 import { writeAnswerStageToMeta, mergeInteraction } from './processors.js';
 import { enableUseLink } from './use-link.js';
 

package/src/workflow/ask.js

@@ -4,6 +4,7 @@ import { fields } from '../actor/index.js';
 import { ROLE, ORGANIC_QUESTION_SOURCE } from '../constants.js';
 import { OptionListLayout, ListLayout, SearchBoxLayout } from '../layout/index.js';
 import { mergeInteraction } from './processors.js';
+import { mergeRolesOptions } from './options/index.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   ...AnswerBasedWorkflow.DEFAULT_API_OPTIONS,
@@ -38,7 +39,9 @@ const DEFAULT_OPTIONS = Object.freeze({
   trackers: DEFAULT_TRACKERS,
 });
 
-const ROLES_OPTIONS = AnswerBasedWorkflow.ROLES_OPTIONS;
+const ROLES_OPTIONS = mergeRolesOptions(AnswerBasedWorkflow.ROLES_OPTIONS, {
+  members: Object.keys(DEFAULT_LAYOUTS),
+});
 
 export default class Ask extends AnswerBasedWorkflow {
 

package/src/workflow/base.js

@@ -3,7 +3,7 @@ import { Hub, SessionMaker, DataActor, ViewsActor, InteractionsActor, fields } f
 import * as sources from '../source.js';
 import { STATUS, ROLE } from '../constants.js';
 import { ContainerLayout, ErrorLayout } from '../layout/index.js';
-import { WorkflowOptions, mergeApiOptions, makeConfigurable } from './options.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

package/src/workflow/context.js

@@ -1,5 +1,5 @@
 import { Component } from '@miso.ai/commons';
-import { WorkflowContextOptions, makeConfigurable } from './options.js';
+import { WorkflowContextOptions, makeConfigurable } from './options/index.js';
 
 export default class WorkflowContext extends Component {
 

package/src/workflow/explore.js

@@ -3,7 +3,7 @@ import Workflow from './base.js';
 import { fields } from '../actor/index.js';
 import { ROLE, EVENT_TYPE } from '../constants.js';
 import { ListLayout, SearchBoxLayout } from '../layout/index.js';
-import { mergeRolesOptions } from './options.js';
+import { mergeRolesOptions } from './options/index.js';
 import { enableUseLink, UseLinkMixin } from './use-link.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({

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

@@ -1,6 +1,6 @@
 import AnswerBasedWorkflow from './answer-based.js';
 import { ROLE, STATUS, ORGANIC_QUESTION_SOURCE } from '../constants.js';
-import { mergeRolesOptions } from './options.js';
+import { mergeRolesOptions } from './options/index.js';
 import { writeKeywordsToData } from './processors.js';
 import { makeAutocompletable } from './autocompletable.js';
 
@@ -42,10 +42,15 @@ export default class HybridSearchAnswer extends AnswerBasedWorkflow {
   }
 
   // query //
-  _buildPayload({ q, qs, ...payload } = {}) {
+  _buildPayload(payload) {
+    payload = this._writeQuestionSourceToPayload(payload);
+    payload = this._superworkflow._results._writeFiltersToPayload(payload);
+    return payload;
+  }
+
+  _writeQuestionSourceToPayload({ qs, ...payload } = {}) {
     return {
       ...payload,
-      q, // q, not question
       _meta: {
         ...payload._meta,
         question_source: qs || ORGANIC_QUESTION_SOURCE, // might be null, not undefined

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

@@ -2,11 +2,12 @@ import { trimObj } from '@miso.ai/commons';
 import SearchBasedWorkflow from './search-based.js';
 import { fields } from '../actor/index.js';
 import { ROLE } from '../constants.js';
-import { mergeRolesOptions } from './options.js';
 
-const ROLES_OPTIONS = mergeRolesOptions(SearchBasedWorkflow.ROLES_OPTIONS, {
-  members: [ROLE.PRODUCTS, ROLE.KEYWORDS, ROLE.TOTAL, ROLE.FACETS, ROLE.MORE],
-});
+// we want to override members, not adding to it
+const ROLES_OPTIONS = {
+  ...SearchBasedWorkflow.ROLES_OPTIONS,
+  members: [ROLE.PRODUCTS, ROLE.KEYWORDS, ROLE.TOTAL, ROLE.FACETS, ROLE.SORT, ROLE.MORE, ROLE.ERROR],
+};
 
 export default class HybridSearchResults extends SearchBasedWorkflow {
 
@@ -41,14 +42,23 @@ export default class HybridSearchResults extends SearchBasedWorkflow {
     return this._superworkflow._answer._hub.states[fields.query()];
   }
 
-  _buildPayload({ filters, ...payload } = {}) {
+  _buildPayload(payload) {
     // borrow the work from the sibling
-    payload = this._superworkflow._answer._buildPayload(payload);
-    payload = SearchBasedWorkflow.prototype._buildPayload.call(this, { filters, ...payload });
+    payload = this._superworkflow._answer._writeQuestionSourceToPayload(payload);
+    payload = this._writeFiltersToPayload(payload);
+    payload = this._writePageInfoToPayload(payload);
     payload = this._writeQuestionIdToPayload(payload);
     return { ...payload, answer: false };
   }
 
+  _buildOrderBy(sort) {
+    if (!sort) {
+      return undefined;
+    }
+    // works differently than search
+    return sort.field;
+  }
+
   _writeQuestionIdToPayload(payload) {
     return {
       ...payload,
@@ -60,3 +70,7 @@ export default class HybridSearchResults extends SearchBasedWorkflow {
   }
 
 }
+
+Object.assign(HybridSearchResults, {
+  ROLES_OPTIONS,
+});

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

@@ -1,17 +1,9 @@
 import { ROLE } from '../constants.js';
+import HybridSearchResults from './hybrid-search-results.js';
 
 function getSubworkflowByRole(role) {
   // TODO: ROLE.ERROR
-  switch (role) {
-    case ROLE.PRODUCTS:
-    case ROLE.TOTAL:
-    case ROLE.FACETS:
-    case ROLE.KEYWORDS:
-    case ROLE.MORE:
-      return 'results';
-    default:
-      return 'answer';
-  }
+  return HybridSearchResults.ROLES_OPTIONS.members.includes(role) ? 'results' : 'answer';
 }
 
 export default class HybridSearchViewsActor {
@@ -102,10 +94,10 @@ export default class HybridSearchViewsActor {
         // find the conflicting element
         for (const component of container.components) {
           if (otherSubviews.containsElement(component)) {
-            throw new Error(`<${container.tagName}> cannot contain both <${component.tagName}> and <${child.tagName}>, for they don't share the same data lifecycle.`);
+            throw new Error(`<${container.tagName.toLowerCase()}> cannot contain both <${component.tagName.toLowerCase()}> and <${child.tagName.toLowerCase()}>, for they don't share the same data lifecycle.`);
           }
         }
-        throw new Error(`Failed to add container <${container.tagName}> with child component <${child.tagName}>.`);
+        throw new Error(`Failed to add container <${container.tagName.toLowerCase()}> with child component <${child.tagName.toLowerCase()}>.`);
       }
     }
     // add the container to the subviews

package/src/workflow/hybrid-search.js

@@ -3,12 +3,12 @@ import { InteractionsActor } from '../actor/index.js';
 import Workflow from './base.js';
 import SearchBasedWorkflow from './search-based.js';
 import AnswerBasedWorkflow from './answer-based.js';
-import { ROLE } from '../constants.js';
+import { ROLE, WORKFLOW_CONFIGURABLE } from '../constants.js';
 import { SearchBoxLayout, TextLayout } from '../layout/index.js';
 import HybridSearchAnswer from './hybrid-search-answer.js';
 import HybridSearchResults from './hybrid-search-results.js';
 import HybridSearchViewsActor from './hybrid-search-views.js';
-import { makeConfigurable } from './options.js';
+import { makeConfigurable } from './options/index.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   group: API.GROUP.ASK,
@@ -162,4 +162,4 @@ export default class HybridSearch extends Workflow {
 
 }
 
-makeConfigurable(HybridSearch.prototype, ['pagination']);
+makeConfigurable(HybridSearch.prototype, [WORKFLOW_CONFIGURABLE.PAGINATION, WORKFLOW_CONFIGURABLE.FILTERS]);