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

package/dist/cjs/layout/input/search-box.js

@@ -107,10 +107,7 @@ function completionList(layout, type, items) {
     className,
     templates
   } = layout;
-  return `
-<ul class="${className}__${type}-list" data-role="${type}-list">
-  ${items.map(item => templates.completionItem(layout, type, item)).join('')}
-</ul>`.trim();
+  return `<ul class="${className}__${type}-list" data-role="${type}-list">${items.map(item => templates.completionItem(layout, type, item)).join('')}</ul>`;
 }
 function completionItem(layout, type, item) {
   const {
@@ -334,7 +331,7 @@ class SearchBoxLayout extends _template.default {
       target,
       isComposing
     } = _ref8;
-    if (!isComposing && key === 'Enter' && target.matches('input')) {
+    if (!isComposing && key === 'Enter' && target.matches('[data-role="input"]')) {
       this._submit(target.value);
       target.blur();
     }

package/dist/cjs/layout/list/collection.js

@@ -22,7 +22,7 @@ function root(layout, state) {
     status
   } = state;
   const roleAttr = role ? `data-role="${role}"` : '';
-  return `<div class="${className} ${status}" ${roleAttr}>${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loadingBar(layout, state)}</div>`;
+  return `<div class="${className} ${status}" ${roleAttr}>${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loading(layout, state)}</div>`;
 }
 function ready(layout, state) {
   const {
@@ -78,11 +78,8 @@ function trigger(layout, state) {
   } = layout;
   return `<div class="${className}__trigger" data-role="trigger"></div>`;
 }
-function loadingBar(layout, state) {
-  const {
-    className
-  } = layout;
-  return `<div class="${className}__loading-bar"></div>`;
+function loading() {
+  return `<div class="miso-loading" aria-label="Loading" data-role="loading"></div>`;
 }
 
 // TODO: let templates.js control what to be included here
@@ -111,7 +108,7 @@ const DEFAULT_TEMPLATES = Object.freeze({
   imageBlock: _templates.imageBlock,
   indexBlock: _templates.indexBlock,
   trigger,
-  loadingBar
+  loading
 });
 class CollectionLayout extends _template.default {
   static get defaultTemplates() {

package/dist/cjs/version.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = '1.11.0-beta.10';
+var _default = exports.default = '1.11.0-beta.11';

package/dist/cjs/workflow/hybrid-search-results.js

@@ -9,7 +9,6 @@ var _searchBased = _interopRequireDefault(require("./search-based.js"));
 var _index = require("../actor/index.js");
 var _constants = require("../constants.js");
 var _options = require("./options.js");
-var _processors = require("./processors.js");
 const _excluded = ["filters"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
@@ -47,13 +46,10 @@ class HybridSearchResults extends _searchBased.default {
   }
   _buildPayload() {
     let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let {
-        filters
-      } = _ref,
-      payload = _objectWithoutPropertiesLoose(_ref, _excluded);
+    let payload = _objectWithoutPropertiesLoose(_ref, _excluded);
     // borrow the work from the sibling
     payload = this._superworkflow._answer._buildPayload(payload);
-    payload = (0, _processors.writeFiltersToPayload)(payload, filters);
+    payload = _searchBased.default.prototype._buildPayload.call(this, payload);
     payload = this._writeQuestionIdToPayload(payload);
     return Object.assign({}, payload, {
       answer: false

package/dist/cjs/workflow/processors.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.buildBaseInteraction = buildBaseInteraction;
-exports.concatResults = concatResults;
+exports.concatItemsFromMoreResponse = concatItemsFromMoreResponse;
 exports.getRevision = getRevision;
-exports.markExhaustion = markExhaustion;
 exports.mergeInteraction = mergeInteraction;
-exports.retainFacetCounts = retainFacetCounts;
+exports.retainFacetCountsInData = retainFacetCountsInData;
 exports.writeAffiliationInfoToInteraction = writeAffiliationInfoToInteraction;
 exports.writeAnswerStageToMeta = writeAnswerStageToMeta;
 exports.writeDataStatus = writeDataStatus;
+exports.writeExhaustionToData = writeExhaustionToData;
 exports.writeFiltersToPayload = writeFiltersToPayload;
 exports.writeKeywordsToData = writeKeywordsToData;
 exports.writeMisoIdToMeta = writeMisoIdToMeta;
@@ -137,7 +137,7 @@ function composeFacetFilters(facets) {
   }
   return Object.keys(filters).length ? filters : undefined;
 }
-function retainFacetCounts(data, currentFacetCounts) {
+function retainFacetCountsInData(data, currentFacetCounts) {
   if (!currentFacetCounts) {
     return data;
   }
@@ -161,7 +161,7 @@ function retainFacetCounts(data, currentFacetCounts) {
     })
   });
 }
-function concatResults(oldData, newData) {
+function concatItemsFromMoreResponse(oldData, newData) {
   let {
     role = _constants.ROLE.PRODUCTS
   } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -169,20 +169,26 @@ function concatResults(oldData, newData) {
     return oldData;
   }
   const {
-    [role]: oldProducts = []
+    [role]: oldProducts = [],
+    facet_counts,
+    total
   } = oldData.value;
   const {
     [role]: newProducts = []
   } = newData.value;
-  // keep exhaustion flag
+  // keep old exhaustion flag, just in case
   // TODO
+
+  // use old values of facet_counts and total, for they are affected by product_id exclusion
   return Object.assign({}, newData, {
+    facet_counts,
+    total,
     value: Object.assign({}, newData.value, {
       [role]: [...oldProducts, ...newProducts]
     })
   });
 }
-function markExhaustion(data) {
+function writeExhaustionToData(data) {
   let {
     role = _constants.ROLE.PRODUCTS
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -196,9 +202,9 @@ function markExhaustion(data) {
     return data;
   }
   const {
-    [role]: products
+    [role]: items
   } = value;
-  if (!products) {
+  if (!items) {
     return data;
   }
   const {
@@ -206,7 +212,7 @@ function markExhaustion(data) {
   } = request.payload;
   const {
     length
-  } = products;
+  } = items;
   const exhausted = length < rows;
   if (!exhausted) {
     return data;

package/dist/cjs/workflow/search-based.js

@@ -75,6 +75,9 @@ class SearchBasedWorkflow extends _base.default {
     const data = this._hub.states[_index.fields.data()];
     return !!(data && data.meta && data.meta.exhausted);
   }
+  get page() {
+    return this._page;
+  }
 
   // query //
   query(args) {
@@ -116,25 +119,31 @@ class SearchBasedWorkflow extends _base.default {
     });
   }
   _more() {
+    // if still loading, complain
+    if (this.status !== _constants.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; // ignore
+      return;
     }
     // don't create a new session!
 
+    this._page++;
+
     // payload
     const query = this._getQuery();
     const filters = this._hub.states[_index.fields.filters()]; // get stored filters
-    const start = (this._page + 1) * this._getPageSize();
-    const payload = this._buildPayload(Object.assign({}, query, {
-      filters,
-      start
+    let payload = this._buildPayload(Object.assign({}, query, {
+      filters
     }));
+    payload = this._processPayloadForMoreRequest(payload);
     this._request({
       payload
     });
-    this._page++;
   }
   _getQuery() {
+    // TODO: just get from the hub
     return this._queryArgs;
   }
   _getPageSize() {
@@ -147,15 +156,40 @@ class SearchBasedWorkflow extends _base.default {
       } = _ref,
       payload = _objectWithoutPropertiesLoose(_ref, _excluded);
     payload = (0, _processors.writeFiltersToPayload)(payload, filters);
+    payload = this._writePageInfoToPayload(payload);
     return payload;
   }
+  _writePageInfoToPayload(payload) {
+    return Object.assign({}, payload, {
+      _meta: Object.assign({}, payload._meta, {
+        page: this._page
+      })
+    });
+  }
+  _processPayloadForMoreRequest() {
+    let payload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const data = this._hub.states[_index.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 Object.assign({}, payload, {
+      exclude
+    });
+  }
 
   // data //
   _defaultProcessData(data) {
     data = super._defaultProcessData(data);
     data = (0, _processors.writeKeywordsToData)(data);
-    data = (0, _processors.retainFacetCounts)(data, this._currentFacetCounts);
-    data = (0, _processors.markExhaustion)(data);
+    data = (0, _processors.retainFacetCountsInData)(data, this._currentFacetCounts);
+    data = (0, _processors.writeExhaustionToData)(data, {
+      role: this._roles.main
+    });
     return data;
   }
   _updateDataInHub(data) {
@@ -166,12 +200,20 @@ class SearchBasedWorkflow extends _base.default {
     const {
       request
     } = data;
-    if (!request || !request.payload.start) {
-      return data; // the initial state, or not from "more" request
+    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[_index.fields.data()];
-    return (0, _processors.concatResults)(currentData, data);
+    return (0, _processors.concatItemsFromMoreResponse)(currentData, data, {
+      role: this._roles.main
+    });
   }
 }
 exports.default = SearchBasedWorkflow;

package/package.json

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

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

@@ -78,10 +78,7 @@ function product(layout, { product }) {
 
 function completionList(layout, type, items) {
   const { className, templates } = layout;
-  return `
-<ul class="${className}__${type}-list" data-role="${type}-list">
-  ${items.map(item => templates.completionItem(layout, type, item)).join('')}
-</ul>`.trim();
+  return `<ul class="${className}__${type}-list" data-role="${type}-list">${items.map(item => templates.completionItem(layout, type, item)).join('')}</ul>`;
 }
 
 function completionItem(layout, type, item) {
@@ -289,7 +286,7 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
   }
 
   _handleKeyDown({ key, target, isComposing }) {
-    if (!isComposing && key === 'Enter' && target.matches('input')) {
+    if (!isComposing && key === 'Enter' && target.matches('[data-role="input"]')) {
       this._submit(target.value);
       target.blur();
     }

package/src/layout/list/collection.js

@@ -8,7 +8,7 @@ function root(layout, state) {
   const { className, role, templates } = layout;
   const { status } = state;
   const roleAttr = role ? `data-role="${role}"` : '';
-  return `<div class="${className} ${status}" ${roleAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loadingBar(layout, state)}</div>`;
+  return `<div class="${className} ${status}" ${roleAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loading(layout, state)}</div>`;
 }
 
 function ready(layout, state) {
@@ -48,9 +48,8 @@ function trigger(layout, state) {
   return `<div class="${className}__trigger" data-role="trigger"></div>`;
 }
 
-function loadingBar(layout, state) {
-  const { className } = layout;
-  return `<div class="${className}__loading-bar"></div>`;
+function loading() {
+  return `<div class="miso-loading" aria-label="Loading" data-role="loading"></div>`;
 }
 
 // TODO: let templates.js control what to be included here
@@ -79,7 +78,7 @@ const DEFAULT_TEMPLATES = Object.freeze({
   imageBlock,
   indexBlock,
   trigger,
-  loadingBar,
+  loading,
 });
 
 export default class CollectionLayout extends TemplateBasedLayout {

package/src/version.js

@@ -1 +1 @@
-export default '1.11.0-beta.10';
+export default '1.11.0-beta.11';

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

@@ -3,7 +3,6 @@ import SearchBasedWorkflow from './search-based.js';
 import { fields } from '../actor/index.js';
 import { ROLE } from '../constants.js';
 import { mergeRolesOptions } from './options.js';
-import { writeFiltersToPayload } from './processors.js';
 
 const ROLES_OPTIONS = mergeRolesOptions(SearchBasedWorkflow.ROLES_OPTIONS, {
   members: [ROLE.PRODUCTS, ROLE.KEYWORDS, ROLE.TOTAL, ROLE.FACETS, ROLE.MORE],
@@ -45,7 +44,7 @@ export default class HybridSearchResults extends SearchBasedWorkflow {
   _buildPayload({ filters, ...payload } = {}) {
     // borrow the work from the sibling
     payload = this._superworkflow._answer._buildPayload(payload);
-    payload = writeFiltersToPayload(payload, filters);
+    payload = SearchBasedWorkflow.prototype._buildPayload.call(this, payload);
     payload = this._writeQuestionIdToPayload(payload);
     return { ...payload, answer: false };
   }

package/src/workflow/processors.js

@@ -113,7 +113,7 @@ function composeFacetFilters(facets) {
   return Object.keys(filters).length ? filters : undefined;
 }
 
-export function retainFacetCounts(data, currentFacetCounts) {
+export function retainFacetCountsInData(data, currentFacetCounts) {
   if (!currentFacetCounts) {
     return data;
   }
@@ -137,16 +137,20 @@ export function retainFacetCounts(data, currentFacetCounts) {
   };
 }
 
-export function concatResults(oldData, newData, { role = ROLE.PRODUCTS } = {}) {
+export function concatItemsFromMoreResponse(oldData, newData, { role = ROLE.PRODUCTS } = {}) {
   if (!newData.value) {
     return oldData;
   }
-  const { [role]: oldProducts = [] } = oldData.value;
+  const { [role]: oldProducts = [], facet_counts, total } = oldData.value;
   const { [role]: newProducts = [] } = newData.value;
-  // keep exhaustion flag
+  // keep old exhaustion flag, just in case
   // TODO
+
+  // use old values of facet_counts and total, for they are affected by product_id exclusion
   return {
     ...newData,
+    facet_counts,
+    total,
     value: {
       ...newData.value,
       [role]: [...oldProducts, ...newProducts],
@@ -154,18 +158,18 @@ export function concatResults(oldData, newData, { role = ROLE.PRODUCTS } = {}) {
   }
 }
 
-export function markExhaustion(data, { role = ROLE.PRODUCTS } = {}) {
+export function writeExhaustionToData(data, { role = ROLE.PRODUCTS } = {}) {
   const { status, request, value } = data;
   // keep track of the exhaustion state
   if (status !== STATUS.READY || !request || !value) {
     return data;
   }
-  const { [role]: products } = value;
-  if (!products) {
+  const { [role]: items } = value;
+  if (!items) {
     return data;
   }
   const { rows } = request.payload;
-  const { length } = products;
+  const { length } = items;
   const exhausted = length < rows;
   if (!exhausted) {
     return data;

package/src/workflow/search-based.js

@@ -1,9 +1,9 @@
 import { API } from '@miso.ai/commons';
 import Workflow from './base.js';
 import { fields } from '../actor/index.js';
-import { ROLE } from '../constants.js';
+import { STATUS, ROLE } from '../constants.js';
 import { SearchBoxLayout, ListLayout, TextLayout, FacetsLayout, MoreButtonLayout } from '../layout/index.js';
-import { writeKeywordsToData, writeFiltersToPayload, retainFacetCounts, markExhaustion, concatResults } from './processors.js';
+import { writeKeywordsToData, writeFiltersToPayload, retainFacetCountsInData, writeExhaustionToData, concatItemsFromMoreResponse } from './processors.js';
 import { mergeRolesOptions, makeConfigurable } from './options.js';
 
 const DEFAULT_ROWS = 10;
@@ -79,6 +79,10 @@ export default class SearchBasedWorkflow extends Workflow {
     return !!(data && data.meta && data.meta.exhausted);
   }
 
+  get page() {
+    return this._page;
+  }
+
   // query //
   query(args) {
     if (!args.q) {
@@ -116,23 +120,29 @@ export default class SearchBasedWorkflow extends Workflow {
   }
 
   _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; // ignore
+      return;
     }
     // don't create a new session!
 
+    this._page++;
+
     // 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 });
+    let payload = this._buildPayload({ ...query, filters });
+    payload = this._processPayloadForMoreRequest(payload);
 
     this._request({ payload });
-
-    this._page++;
   }
 
   _getQuery() {
+    // TODO: just get from the hub
     return this._queryArgs;
   }
 
@@ -142,15 +152,40 @@ export default class SearchBasedWorkflow extends Workflow {
 
   _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 = retainFacetCounts(data, this._currentFacetCounts);
-    data = markExhaustion(data);
+    data = retainFacetCountsInData(data, this._currentFacetCounts);
+    data = writeExhaustionToData(data, { role: this._roles.main });
     return data;
   }
 
@@ -161,12 +196,16 @@ export default class SearchBasedWorkflow extends Workflow {
 
   _appendResultsFromMoreRequest(data) {
     const { request } = data;
-    if (!request || !request.payload.start) {
-      return data; // the initial state, or not from "more" request
+    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 concatResults(currentData, data);
+    return concatItemsFromMoreResponse(currentData, data, { role: this._roles.main });
   }
 
 }