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

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.12';

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

@@ -12,6 +12,7 @@ var _index2 = require("../layout/index.js");
 var _index3 = require("../affiliation/index.js");
 var _options = require("./options.js");
 var _processors = require("./processors.js");
+var _useLink = require("./use-link.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DEFAULT_API_OPTIONS = Object.freeze(Object.assign({}, _base.default.DEFAULT_API_OPTIONS, {
   group: _commons.API.GROUP.ASK,
@@ -84,15 +85,6 @@ class AnswerBasedWorkflow extends _base.default {
     this._unsubscribes = [...this._unsubscribes, this._hub.on(_index.fields.query(), args => this._query(args)), this._views.get(_constants.ROLE.ANSWER).on('citation-click', event => this._onCitationClick(event))];
   }
 
-  // configuration //
-  useLink(fn) {
-    if (typeof fn !== 'function' && fn !== false) {
-      throw new Error('useLink(fn) expects fn to be a function or false');
-    }
-    this._linkFn = fn;
-    return this;
-  }
-
   // lifecycle //
   restart() {
     // clear question id from previous session
@@ -166,7 +158,7 @@ class AnswerBasedWorkflow extends _base.default {
   _query() {
     let args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     if (this._linkFn) {
-      this._submit(args);
+      this._submitToPage(args);
       return;
     }
     // start a new session
@@ -181,14 +173,6 @@ class AnswerBasedWorkflow extends _base.default {
       payload
     });
   }
-  _submit(args) {
-    if (!this._linkFn) {
-      return;
-    }
-    // TODO: we want a submit event, but only with linkFn
-    const url = this._linkFn(args.q);
-    window.open(url, '_blank');
-  }
   _writeQuestionSourceToSession(args) {
     this.session.meta.question_source = args.qs || _constants.ORGANIC_QUESTION_SOURCE; // might be null, not undefined
   }
@@ -323,6 +307,7 @@ class AnswerBasedWorkflow extends _base.default {
   }
 }
 exports.default = AnswerBasedWorkflow;
+(0, _useLink.enableUseLink)(AnswerBasedWorkflow.prototype);
 Object.assign(AnswerBasedWorkflow, {
   DEFAULT_API_OPTIONS,
   DEFAULT_AUTOCOMPLETE_OPTIONS,

package/dist/cjs/workflow/explore.js

@@ -10,6 +10,7 @@ var _index = require("../actor/index.js");
 var _constants = require("../constants.js");
 var _index2 = require("../layout/index.js");
 var _options = require("./options.js");
+var _useLink = require("./use-link.js");
 const _excluded = ["value"];
 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; }
@@ -61,7 +62,7 @@ class Explore extends _base.default {
   }
   _initSubscriptions(args) {
     super._initSubscriptions(args);
-    this._unsubscribes = [...this._unsubscribes, this._views.get(_constants.ROLE.RELATED_QUESTIONS).on('click', event => this._handleRelatedQuestionClick(event)), this._hub.on(_index.fields.query(), args => this._submit(args))];
+    this._unsubscribes = [...this._unsubscribes, this._views.get(_constants.ROLE.RELATED_QUESTIONS).on('click', event => this._handleRelatedQuestionClick(event)), this._hub.on(_index.fields.query(), args => this._query(args))];
   }
 
   // configuration //
@@ -80,13 +81,6 @@ class Explore extends _base.default {
     }
     return super.useApi(options);
   }
-  useLink(fn) {
-    if (typeof fn !== 'function' && fn !== false) {
-      throw new Error('useLink(fn) expects fn to be a function or false');
-    }
-    this._linkFn = fn;
-    return this;
-  }
 
   // lifecycle //
   start() {
@@ -94,7 +88,7 @@ class Explore extends _base.default {
       relatedQuestions = true
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     if (this._linkFn === undefined) {
-      throw new Error('Define link mapping function before calling start()');
+      throw new Error('Must define link mapping function with useLink(fn) before calling start()');
     }
     // in explore workflow, start() triggers query
     // TODO: we should still make the query lifecycle
@@ -125,16 +119,24 @@ class Explore extends _base.default {
   }
   _defaultProcessData(data) {
     data = super._defaultProcessData(data);
-    let {
+    data = this._addUrlToRelatedQuestions(data);
+    return data;
+  }
+  _addUrlToRelatedQuestions(data) {
+    const {
       value
     } = data;
-    if (!value) {
+    if (!value || !value.related_questions) {
       return data;
     }
-    // patch value with links
-    const related_questions = value.related_questions.map(this._linkFn ? text => ({
+    const linkFn = this._linkFn && this._linkFn[0];
+    const related_questions = value.related_questions.map(linkFn ? text => ({
       text,
-      url: this._getAnswersUrl(text, true)
+      url: this._getSubmitUrl({
+        q: text
+      }, {
+        generated: true
+      })
     }) : text => ({
       text
     }));
@@ -159,26 +161,19 @@ class Explore extends _base.default {
     }
     this._hub.update(_index.fields.query(), args);
   }
-  _submit() {
-    let {
-      q
-    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    if (!this._linkFn) {
-      return;
-    }
-    const url = this._getAnswersUrl(q);
-    window.open(url, '_blank');
+  _query(args) {
+    this._submitToPage(args);
   }
-  _getAnswersUrl(text) {
-    let generated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    if (!this._linkFn) {
-      return;
-    }
-    const url = this._linkFn(text);
+  _getSubmitUrl(args) {
+    let {
+      generated = false
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    let url = _useLink.UseLinkMixin.prototype._getSubmitUrl.call(this, args);
     if (!generated || !this._productId) {
       return url;
     }
     return `${url}&qs=${encodeURIComponent(this._productId)}`;
   }
 }
-exports.default = Explore;
+exports.default = Explore;
+(0, _useLink.enableUseLink)(Explore.prototype);

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/hybrid-search.js

@@ -95,8 +95,8 @@ class HybridSearch extends _base.default {
   }
 
   // configuration //
-  useLink(fn) {
-    this._answer.useLink(fn);
+  useLink(fn, options) {
+    this._answer.useLink(fn, options);
     return this;
   }
 

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/dist/cjs/workflow/use-link.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UseLinkMixin = void 0;
+exports.enableUseLink = enableUseLink;
+var _commons = require("@miso.ai/commons");
+function enableUseLink(prototype) {
+  (0, _commons.mixin)(prototype, UseLinkMixin.prototype);
+}
+class UseLinkMixin {
+  useLink(fn) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    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() {
+    let args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    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);
+  }
+}
+exports.UseLinkMixin = UseLinkMixin;

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.12"
   },
-  "version": "1.11.0-beta.10"
+  "version": "1.11.0-beta.12"
 }

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.12';

package/src/workflow/answer-based.js

@@ -6,6 +6,7 @@ import { SearchBoxLayout, TextLayout, ListLayout, TypewriterLayout, FeedbackLayo
 import { processData as processAffiliationData } from '../affiliation/index.js';
 import { mergeRolesOptions } from './options.js';
 import { writeAnswerStageToMeta, mergeInteraction } from './processors.js';
+import { enableUseLink } from './use-link.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   ...Workflow.DEFAULT_API_OPTIONS,
@@ -80,15 +81,6 @@ export default class AnswerBasedWorkflow extends Workflow {
     ];
   }
 
-  // configuration //
-  useLink(fn) {
-    if (typeof fn !== 'function' && fn !== false) {
-      throw new Error('useLink(fn) expects fn to be a function or false');
-    }
-    this._linkFn = fn;
-    return this;
-  }
-
   // lifecycle //
   restart() {
     // clear question id from previous session
@@ -154,7 +146,7 @@ export default class AnswerBasedWorkflow extends Workflow {
 
   _query(args = {}) {
     if (this._linkFn) {
-      this._submit(args);
+      this._submitToPage(args);
       return;
     }
     // start a new session
@@ -168,15 +160,6 @@ export default class AnswerBasedWorkflow extends Workflow {
     this._request({ payload });
   }
 
-  _submit(args) {
-    if (!this._linkFn) {
-      return;
-    }
-    // TODO: we want a submit event, but only with linkFn
-    const url = this._linkFn(args.q);
-    window.open(url, '_blank');
-  }
-
   _writeQuestionSourceToSession(args) {
     this.session.meta.question_source = args.qs || ORGANIC_QUESTION_SOURCE; // might be null, not undefined
   }
@@ -294,6 +277,8 @@ export default class AnswerBasedWorkflow extends Workflow {
 
 }
 
+enableUseLink(AnswerBasedWorkflow.prototype);
+
 Object.assign(AnswerBasedWorkflow, {
   DEFAULT_API_OPTIONS,
   DEFAULT_AUTOCOMPLETE_OPTIONS,

package/src/workflow/explore.js

@@ -4,6 +4,7 @@ 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 { enableUseLink, UseLinkMixin } from './use-link.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   ...Workflow.DEFAULT_API_OPTIONS,
@@ -61,7 +62,7 @@ export default class Explore extends Workflow {
     this._unsubscribes = [
       ...this._unsubscribes,
       this._views.get(ROLE.RELATED_QUESTIONS).on('click', event => this._handleRelatedQuestionClick(event)),
-      this._hub.on(fields.query(), args => this._submit(args)),
+      this._hub.on(fields.query(), args => this._query(args)),
     ];
   }
 
@@ -81,18 +82,10 @@ export default class Explore extends Workflow {
     return super.useApi(options);
   }
 
-  useLink(fn) {
-    if (typeof fn !== 'function' && fn !== false) {
-      throw new Error('useLink(fn) expects fn to be a function or false');
-    }
-    this._linkFn = fn;
-    return this;
-  }
-
   // lifecycle //
   start({ relatedQuestions = true } = {}) {
     if (this._linkFn === undefined) {
-      throw new Error('Define link mapping function before calling start()');
+      throw new Error('Must define link mapping function with useLink(fn) before calling start()');
     }
     // in explore workflow, start() triggers query
     // TODO: we should still make the query lifecycle
@@ -113,12 +106,17 @@ export default class Explore extends Workflow {
 
   _defaultProcessData(data) {
     data = super._defaultProcessData(data);
-    let { value } = data;
-    if (!value) {
+    data = this._addUrlToRelatedQuestions(data);
+    return data;
+  }
+
+  _addUrlToRelatedQuestions(data) {
+    const { value } = data;
+    if (!value || !value.related_questions) {
       return data;
     }
-    // patch value with links
-    const related_questions = value.related_questions.map(this._linkFn ? (text => ({ text, url: this._getAnswersUrl(text, true) })) : (text => ({ text })));
+    const linkFn = this._linkFn && this._linkFn[0];
+    const related_questions = value.related_questions.map(linkFn ? (text => ({ text, url: this._getSubmitUrl({ q: text }, { generated: true }) })) : (text => ({ text })));
     return {
       ...data,
       value: {
@@ -139,19 +137,12 @@ export default class Explore extends Workflow {
     this._hub.update(fields.query(), args);
   }
 
-  _submit({ q } = {}) {
-    if (!this._linkFn) {
-      return;
-    }
-    const url = this._getAnswersUrl(q);
-    window.open(url, '_blank');
+  _query(args) {
+    this._submitToPage(args);
   }
 
-  _getAnswersUrl(text, generated = false) {
-    if (!this._linkFn) {
-      return;
-    }
-    const url = this._linkFn(text);
+  _getSubmitUrl(args, { generated = false } = {}) {
+    let url = UseLinkMixin.prototype._getSubmitUrl.call(this, args);
     if (!generated || !this._productId) {
       return url;
     }
@@ -159,3 +150,5 @@ export default class Explore extends Workflow {
   }
 
 }
+
+enableUseLink(Explore.prototype);

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/hybrid-search.js

@@ -111,8 +111,8 @@ export default class HybridSearch extends Workflow {
   }
 
   // configuration //
-  useLink(fn) {
-    this._answer.useLink(fn);
+  useLink(fn, options) {
+    this._answer.useLink(fn, options);
     return this;
   }
 

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 });
   }
 
 }

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);
+  }
+
+}