@miso.ai/client-sdk-ui 1.12.7 → 1.13.0-beta.1

package/dist/cjs/workflow/explore.js

@@ -66,7 +66,7 @@ class Explore extends _unit.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._query(args))];
+    this._unsubscribes = [...this._unsubscribes, this._views.on(_constants.ROLE.RELATED_QUESTIONS, 'click', event => this._handleRelatedQuestionClick(event)), this._hub.on(_index.fields.query(), args => this._query(args))];
   }
 
   // configuration //

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

@@ -19,9 +19,15 @@ class HybridSearchViewsActor {
   get filters() {
     return this._subviews.results.filters;
   }
+  on(role, event, callback) {
+    return this._getSubviews(role).on(role, event, callback);
+  }
   get(role) {
     return this._getSubviews(role).get(role);
   }
+  getAll(role) {
+    return this._getSubviews(role).getAll(role);
+  }
   addContainer(element) {
     if (this._containers.has(element)) {
       return;
@@ -41,21 +47,18 @@ class HybridSearchViewsActor {
     this._containers.delete(element);
   }
   addComponent(element) {
-    this._getViewByElement(element).element = element;
+    this._getSubviews(element.role).addComponent(element);
     this._addContainerToSubviews(element._container, element);
   }
   removeComponent(element) {
-    this._getViewByElement(element).element = undefined;
+    this._getSubviews(element.role).removeComponent(element);
     this._removeContainerFromSubviewsIfNecessary(element._container);
   }
   updateComponentRole(element, oldRole, newRole) {
     // TODO
   }
   refreshElement(element) {
-    const view = element.isContainer ? this._containers.get(element) : this._getViewByElement(element);
-    view && view.refresh({
-      force: true
-    });
+    this._getSubviews(element.role).refreshElement(element);
   }
 
   // helpers //
@@ -65,15 +68,6 @@ class HybridSearchViewsActor {
   _getSubviews(role) {
     return this._subviews[getSubworkflowByRole(role)];
   }
-  _getViewByElement(element) {
-    let {
-      role
-    } = element;
-    if (!role) {
-      throw new Error('Component must have a role');
-    }
-    return this.get(role);
-  }
   _addContainerToSubviews(container, child) {
     if (!container) {
       return;

package/dist/cjs/workflow/options/auto-query.js

@@ -41,17 +41,21 @@ function autoQuery(options = {}) {
   const searchParams = new URLSearchParams(window.location.search);
   const q = searchParams.get(param);
   const qs = searchParams.get(sourceParam) || undefined;
-  const {
-    layout
-  } = this._views.get(_constants.ROLE.QUERY);
-  if (layout) {
-    if (q && setValue) {
-      layout.value = q;
-    }
-    if (!q && focus) {
-      layout.focus();
+
+  // because it's probably not there yet, but this is an ad-hoc solution
+  setTimeout(() => {
+    for (const view of this._views.getAll(_constants.ROLE.QUERY)) {
+      const {
+        layout
+      } = view;
+      if (q && setValue) {
+        layout.value = q;
+      }
+      if (!q && focus) {
+        layout.focus();
+      }
     }
-  }
+  });
   if (q) {
     this.query((0, _commons.trimObj)({
       q,

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

@@ -64,7 +64,7 @@ const ROLES_OPTIONS = (0, _index3.mergeRolesOptions)(_base.default.ROLES_OPTIONS
 class SearchBasedWorkflow extends _base.default {
   _initSubscriptions(args) {
     super._initSubscriptions(args);
-    this._unsubscribes = [...this._unsubscribes, this._hub.on(_index.fields.query(), args => this._query(args)), this._hub.on(_index.fields.filters(), () => this._refine()), this._hub.on(_index.fields.more(), () => this._more()), this._views.get(_constants.ROLE.SORT).on('select', event => this._handleSortSelect(event))];
+    this._unsubscribes = [...this._unsubscribes, this._hub.on(_index.fields.query(), args => this._query(args)), this._hub.on(_index.fields.filters(), () => this._refine()), this._hub.on(_index.fields.more(), () => this._more()), this._views.on(_constants.ROLE.SORT, 'select', event => this._handleSortSelect(event))];
   }
   restart() {
     super.restart();

package/package.json

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

package/src/actor/index.js

@@ -6,5 +6,5 @@ export { default as SessionMaker } from './sessions.js';
 export { default as DataActor } from './data.js';
 export { default as ViewsActor } from './views.js';
 export { default as FeedbackActor } from './feedback.js';
-export { default as TrackersActor } from './trackers.js';
 export { default as InteractionsActor } from './interactions.js';
+export * from './trackers.js';

package/src/actor/trackers.js

@@ -1,21 +1,24 @@
 import { ROLE } from '../constants.js';
 import Tracker from './tracker.js';
 
-export default class TrackersActor {
+export class TrackersActor {
 
-  constructor(hub, { options }) {
+  constructor(hub, { roles, options }) {
     this._hub = hub;
+    this._roles = roles;
     this._options = options;
     this._trackers = {};
   }
 
   get(role) {
+    if (!this._roles.members.includes(role)) {
+      throw new Error(`Role "${role}" is not a member of this workflow.`);
+    }
     if (!this._trackers[role]) {
-      const itemless = role === ROLE.CONTAINER;
       this._trackers[role] = new Tracker({
         hub: this._hub,
         role,
-        itemless,
+        itemless: role === ROLE.CONTAINER,
         options: () => this._getTrackerOptions(role),
       });
     }
@@ -28,3 +31,15 @@ export default class TrackersActor {
   }
 
 }
+
+export function proxyTrackers(trackers) {
+  return new Proxy(trackers, {
+    get: (target, prop) => {
+      try {
+        return target.get(prop);
+      } catch (_) {
+      }
+      return undefined;
+    },
+  });
+}

package/src/actor/view.js

@@ -2,7 +2,6 @@ import { trimObj, defineValues, delegateGetters, EventEmitter } from '@miso.ai/c
 import { STATUS, ROLE, isDataRole } from '../constants.js';
 import * as fields from './fields.js';
 import ProxyElement from '../util/proxy.js';
-import Tracker from './tracker.js';
 
 function statesEqual(a, b) {
   return a === b || (a && b &&
@@ -97,22 +96,13 @@ export default class ViewActor {
   }
 
   get tracker() {
-    const { role } = this;
-    if (role === ROLE.CONTAINER) {
-      return this._views._getContainerTracker();
-    }
-    // TODO: we should move this to workflow level, as there could be multiple view of the same role in the future
-    if (!this._tracker) {
-      const { hub } = this;
-      this._tracker = new Tracker({ hub, role, options: () => this.trackerOptions });
-    }
-    return this._tracker;
+    return this._views.trackers[this.role];
   }
 
   get workflow() {
     return this._views._workflow;
   }
-  
+
   get workflowOptions() {
     return this._views._options.resolved;
   }
@@ -155,7 +145,7 @@ export default class ViewActor {
     };
     try {
       await this._layout.render(element, data, { notifyUpdate });
-    } catch(error) {
+    } catch (error) {
       this._error(error);
       notifyUpdate({ error });
     }
@@ -188,6 +178,7 @@ export default class ViewActor {
     return trimObj(sliced);
   }
 
+  // TODO: move this to workflow
   _isContainerEmpty(data) {
     const { element } = this;
     if (!element) {
@@ -219,11 +210,16 @@ export default class ViewActor {
     }
     try {
       this._layout[method](...args);
-    } catch(e) {
+    } catch (e) {
       this._error(e);
     }
   }
 
+  _emit(name, data) {
+    this._events.emit(name, data);
+    this._views._events.emit(`${this.role}:${name}`, data);
+  }
+
   _error(e) {
     this._views._error(e);
   }

package/src/actor/views.js

@@ -1,10 +1,8 @@
-import { defineValues, delegateGetters } from '@miso.ai/commons';
+import { defineValues, delegateGetters, EventEmitter } from '@miso.ai/commons';
 import { ROLE } from '../constants.js';
 import * as fields from './fields.js';
 import ViewActor from './view.js';
 import Filters from './filters.js';
-import Tracker from './tracker.js';
-import { normalizeTrackerOptions } from '../util/trackers.js';
 
 export default class ViewsActor {
 
@@ -23,20 +21,12 @@ export default class ViewsActor {
     this._options = options;
     this._roles = roles;
     this._containers = new Map();
-    this._containerTracker = undefined;
-    this._views = {};
+    this._components = new Map();
     this._filters = new Filters(this);
-
-    for (const role of roles.members) {
-      if (role === ROLE.CONTAINER) {
-        continue;
-      }
-      this._views[role] = new ViewActor(this, role);
-    }
+    this._events = new EventEmitter();
 
     defineValues(this, {
       interface: new Views(this),
-      trackers: new Trackers(this, roles.members),
     });
 
     const syncSize = () => this.syncSize();
@@ -55,14 +45,20 @@ export default class ViewsActor {
     return this._filters;
   }
 
+  get trackers() {
+    return this._workflow.trackers;
+  }
+
+  on(role, name, fn) {
+    return this._events.on(`${role}:${name}`, fn);
+  }
+
   // elements //
   addContainer(element) {
     if (this._containers.has(element)) {
       return;
     }
-    const view = new ViewActor(this, ROLE.CONTAINER);
-    view.layout = this._createLayout(ROLE.CONTAINER);
-    view.element = element;
+    const view = this._createView(element);
     this._containers.set(element, view);
 
     const { components } = element;
@@ -85,11 +81,20 @@ export default class ViewsActor {
   }
 
   addComponent(element) {
-    this._getViewByElement(element).element = element;
+    if (this._components.has(element)) {
+      return;
+    }
+    const view = this._createView(element);
+    this._components.set(element, view);
   }
 
   removeComponent(element) {
-    this._getViewByElement(element).element = undefined;
+    const view = this._components.get(element);
+    if (!view) {
+      return;
+    }
+    view._destroy();
+    this._components.delete(element);
   }
 
   updateComponentRole(element, oldRole, newRole) {
@@ -97,61 +102,31 @@ export default class ViewsActor {
   }
 
   containsElement(element) {
-    return this._containers.has(element) || this._views[element.role];
+    return this._containers.has(element) || this._components.has(element);
   }
 
   refreshElement(element) {
-    const view = element.isContainer ? this._containers.get(element) : this._getViewByElement(element);
+    const view = element.isContainer ? this._containers.get(element) : this._components.get(element);
     view && view.refresh({ force: true });
   }
 
-  _getViewByElement(element) {
-    let { role } = element;
-    if (!role) {
-      throw new Error('Component must have a role');
-    }
-    return this.get(role);
-  }
-
-  /*
-  _requestSyncLayouts() {
-    this._setLayoutRequested = true;
-    setTimeout(() => {
-      if (!this._setLayoutRequested) {
-        return;
-      }
-      this._setLayoutRequested = false;
-      this._syncLayouts();
-    });
+  _createView(element) {
+    const view = new ViewActor(this, element.role);
+    view.layout = this._createLayout(element.role);
+    view.element = element;
+    return view;
   }
-  */
 
   _syncLayouts() {
     // TODO: put a debug event here
     const { layouts } = this._options.resolved;
     if (layouts === false) {
-      // containers
-      for (const view of this._containers.values()) {
-        view.layout = undefined;
-      }
-      // components
-      for (const view of Object.values(this._views)) {
+      for (const view of [...this._containers.values(), ...this._components.values()]) {
         view.layout = undefined;
       }
     } 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 });
-        if (role === ROLE.CONTAINER) {
-          for (const view of this._containers.values()) {
-            view.layout = fn();
-          }
-        } else {
-          const view = this.get(role);
-          if (view) {
-            view.layout = fn();
-          }
-        }
+      for (const view of [...this._containers.values(), ...this._components.values()]) {
+        view.layout = this._createLayout(view.role);
       }
     }
   }
@@ -166,7 +141,11 @@ export default class ViewsActor {
   }
 
   get(role) {
-    return this._views[role];
+    return this.getAll(role)[0];
+  }
+
+  getAll(role) {
+    return role === ROLE.CONTAINER ? this._containers.values() : this._components.values().filter(view => view.role === role);
   }
 
   get views() {
@@ -176,15 +155,16 @@ export default class ViewsActor {
   _getViews(containerFirst = true) {
     return containerFirst ? [
       ...this._containers.values(),
-      ...Object.values(this._views),
+      ...this._components.values(),
     ] : [
-      ...Object.values(this._views),
+      ...this._components.values(),
       ...this._containers.values(),
     ];
   }
 
   syncSize() {
-    for (const view of Object.values(this._views)) {
+    // TODO: containers?
+    for (const view of this._components.values()) {
       view._syncSize();
     }
   }
@@ -201,21 +181,6 @@ export default class ViewsActor {
     return data || this._hub.states[fields.data()];
   }
 
-  _getTrackerOptions(role) {
-    const allTrackerOptions = this._options.resolved.trackers;
-    // TODO: don't need this anymore
-    return normalizeTrackerOptions((allTrackerOptions && allTrackerOptions[role]) || false);
-  }
-
-  _getContainerTracker() {
-    if (!this._containerTracker) {
-      const hub = this._hub;
-      const role = ROLE.CONTAINER;
-      this._containerTracker = new Tracker({ hub, role, itemless: true, options: () => this._getTrackerOptions(role) });
-    }
-    return this._containerTracker;
-  }
-
   _error(e) {
     // TODO: hub trigger error event
     console.error(e);
@@ -252,22 +217,3 @@ class Views {
   }
 
 }
-
-class Trackers {
-
-  constructor(views, roles) {
-    this._views = views;
-    for (const role of roles) {
-      if (role === ROLE.CONTAINER) {
-        continue;
-      }
-      Object.defineProperty(this, role, {
-        get: () => views.get(role).tracker,
-      });
-    }
-    Object.defineProperty(this, ROLE.CONTAINER, {
-      get: () => views._getContainerTracker(),
-    });
-  }
-
-}

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

@@ -1,3 +1,4 @@
+import { ROLE } from '../../constants.js';
 import MisoStubElement from '../util/miso-stub.js';
 import { getClient } from '../utils.js';
 
@@ -52,6 +53,10 @@ export default class MisoContainerElement extends MisoStubElement {
     return true;
   }
 
+  get role() {
+    return ROLE.CONTAINER;
+  }
+
   get workflow() {
     return this._workflow;
   }

package/src/layout/affiliation/affiliation.js

@@ -270,7 +270,7 @@ export default class AffiliationLayout extends CollectionLayout {
     this._displayedIndex = index;
     listElement.style.left = `${-index * 100}%`;
     this._viewable.display(index);
-    this._view._events.emit('display', { index });
+    this._view._emit('display', { index });
   }
 
   _onViewable(index) {

package/src/layout/button/more-button.js

@@ -1,6 +1,7 @@
 import { STATUS } from '../../constants.js';
 import { fields } from '../../actor/index.js';
 import TemplateBasedLayout from '../template.js';
+import { helpers } from '../templates.js';
 
 const TYPE = 'more-button';
 const DEFAULT_CLASSNAME = 'miso-more-button';
@@ -11,7 +12,7 @@ function root(layout, state) {
   const disabledAttr = state.status !== STATUS.READY ? ' disabled' : '';
   return `
 <div class="${className}"${roleAttr}${disabledAttr}>
-  ${templates.text(layout)}
+  ${helpers.asFunction(templates.text)(layout)}
 </div>
 `;
 }

package/src/layout/container/container.js

@@ -2,6 +2,7 @@ import { ROLE, STATUS } from '../../constants.js';
 import RafLayout from '../raf.js';
 import MisoBannerElement from '../../element/util/miso-banner.js';
 import Viewables from '../../util/viewables.js';
+import { setOrRemoveAttribute } from '../../util/dom.js';
 
 const TYPE = 'container';
 
@@ -60,7 +61,9 @@ export default class ContainerLayout extends RafLayout {
     if (!element) {
       return;
     }
-    const { status, ongoing, meta: { miso_id, empty = false, unanswerable = false } = {} } = state;
+    // TODO: ad-hoc for non-general status/attributes
+    const { status, data, ongoing, meta: { miso_id, empty = false, unanswerable = false } = {} } = state;
+    const { blocked_reason, finish_reason } = data || {};
     const statuses = [status, empty ? STATUS.EMPTY : STATUS.NONEMPTY];
     if (status === STATUS.READY) {
       statuses.push(ongoing ? STATUS.ONGOING : STATUS.DONE);
@@ -69,11 +72,9 @@ export default class ContainerLayout extends RafLayout {
       statuses.push(STATUS.UNANSWERABLE);
     }
     element.setAttribute('status', statuses.join(' '));
-    if (miso_id) {
-      element.setAttribute('miso-id', miso_id);
-    } else {
-      element.removeAttribute('miso-id');
-    }
+    setOrRemoveAttribute(element, 'miso-id', miso_id);
+    setOrRemoveAttribute(element, 'blocked-reason', blocked_reason);
+    setOrRemoveAttribute(element, 'finish-reason', finish_reason);
   }
 
   _trackInteractions(element, state) {

package/src/layout/input/option-list.js

@@ -123,7 +123,7 @@ export default class OptionListLayout extends TemplateBasedLayout {
     if (!value) {
       return;
     }
-    this._view._events.emit('select', { value });
+    this._view._emit('select', { value });
   }
 
   destroy() {

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

@@ -313,7 +313,7 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
           if (inputElement) {
             inputElement.value = value;
           }
-          this._view._events.emit('select', Object.freeze({ value: item, index, domEvent: event }));
+          this._view._emit('select', Object.freeze({ value: item, index, domEvent: event }));
           if (!event.defaultPrevented) {
             this._submit(value);
           }
@@ -322,7 +322,7 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
         return;
       }
       if (element.matches('[data-role="product-item"]')) {
-        this._view._events.emit('select', Object.freeze({ value: item, index, domEvent: event }));
+        this._view._emit('select', Object.freeze({ value: item, index, domEvent: event }));
         return;
       }
     }

package/src/layout/input/select.js

@@ -129,7 +129,7 @@ export default class SelectLayout extends TemplateBasedLayout {
       return;
     }
     // TODO: reflect selection right away
-    this._view._events.emit('select', { value });
+    this._view._emit('select', { value });
   }
 
   destroy() {

package/src/layout/list/collection.js

@@ -127,8 +127,8 @@ export default class CollectionLayout extends TemplateBasedLayout {
   _shallRenderIncrementally(state, rendered) {
     // TODO: compare item ids as well
     return this.options.incremental &&
-    rendered && rendered.value && rendered.value.length > 0 &&
-    state.value && state.value.length >= rendered.value.length &&
+      rendered && rendered.value && rendered.value.length > 0 &&
+      state.value && state.value.length >= rendered.value.length &&
       state.session && rendered.session &&
       state.session.id === rendered.session.id;
   }
@@ -195,7 +195,7 @@ export default class CollectionLayout extends TemplateBasedLayout {
   _emitClickEvent(event, binding) {
     const { session } = this._view._state;
     const { value, element } = binding;
-    this._view._events.emit('click', { session, value, element, domEvent: event });
+    this._view._emit('click', { session, value, element, domEvent: event });
   }
 
   destroy() {

package/src/layout/mixin/swipeable.js

@@ -6,7 +6,7 @@ export function makeSwipeable(prototype) {
 }
 
 export class SwipeableMixin {
-  
+
   _initSwipeable() {
     this._swipeableContext = {
       itemCount: undefined,
@@ -138,7 +138,7 @@ export class SwipeableMixin {
       return;
     }
     context.displayEventIndex = index;
-    this._view._events.emit('display', { index });
+    this._view._emit('display', { index });
   }
 
   _onClickSwipeable(event) {

package/src/layout/text/typewriter/index.js

@@ -157,7 +157,7 @@ export default class TypewriterLayout extends ProgressiveLayout {
     if (citationLinkElement) {
       const index = parseInt(citationLinkElement.dataset.index);
       if (!Number.isNaN(index)) {
-        this._view._events.emit('citation-click', { event, index });
+        this._view._emit('citation-click', { event, index });
       }
       return;
     }
@@ -168,7 +168,7 @@ export default class TypewriterLayout extends ProgressiveLayout {
       let { q } = followUpLinkElement.dataset;
       q = q ? q.trim() : undefined;
       if (q) {
-        this._view._events.emit('follow-up-click', { event, q });
+        this._view._emit('follow-up-click', { event, q });
       }
       return;
     }
@@ -180,7 +180,7 @@ export default class TypewriterLayout extends ProgressiveLayout {
         // TODO: classList, attributes
         const { href, innerText, className } = anchorElement;
         if (href) {
-          this._view._events.emit('link-click', trimObj({
+          this._view._emit('link-click', trimObj({
             event,
             url: href,
             text: innerText ? innerText.trim() : '',

package/src/version.js

@@ -1 +1 @@
-export default '1.12.7';
+export default '1.13.0-beta.1';