@metacell/geppetto-meta-client/common/layout/WidgetFactory.js

Geppetto web frontend. Geppetto is an open-source platform to build web-based tools to visualize and simulate neuroscience data and models.

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import * as React from "react";
import { updateWidget } from "./actions";

/**
 * Widget Factory. All components shown in the main flexible layout are instantiated here.
 *
 * @memberof Control
 */
var WidgetFactory = /*#__PURE__*/function () {
  function WidgetFactory(componentMap) {
    var _this = this;
    _classCallCheck(this, WidgetFactory);
    /**
     * Dict of widgets.
     */
    _defineProperty(this, "widgets", {});
    _defineProperty(this, "componentMap", {});
    _defineProperty(this, "store", void 0);
    // didn't found a way to make standard refs work here, so using a custom callback
    _defineProperty(this, "refs", {});
    _defineProperty(this, "WidgetToComponent", function (_ref) {
      var widgetConfig = _ref.widgetConfig;
      _this.refs[widgetConfig.id] = /*#__PURE__*/React.createRef();
      var Component = _this.componentMap[widgetConfig.component];
      var proto = Component.WrappedComponent ? Component.WrappedComponent.proto : Component.proto;
      var ref = proto && proto.importSession ? {
        ref: _this.refs[widgetConfig.id]
      } : {};

      // Note: the sessionChange is an option that is available to save components sessions within the widget itself
      // It's a more reacty way than using references and also works for functional components, but it's not
      // possible to push a session update top-down, so it's the component that would need to know when its internal
      // session data changed. Note that the session save/load is not a preferable way to implement application state
      // logic persistence, it's rather a workaround to catch what may escape form React/Redux control (e.g. canvas data)
      var sessionChange = function sessionChange(session) {
        _this.store.dispatch(updateWidget(_objectSpread(_objectSpread({}, widgetConfig), {}, {
          session: session
        })));
      };
      if (!widgetConfig.config) {
        widgetConfig.config = {};
      }
      if (!widgetConfig.props) {
        widgetConfig.props = {};
      }
      return Component ? /*#__PURE__*/React.createElement(Component, _extends({
        id: widgetConfig.id,
        key: widgetConfig.id,
        session: widgetConfig.session,
        onSessionChange: sessionChange
      }, widgetConfig.config, widgetConfig.props, ref)) : /*#__PURE__*/React.createElement("div", null, "Error on widget configuration ", widgetConfig.id, ": no component matching \"", widgetConfig.component, "\"");
    });
    this.widgets = {};
    this.componentMap = componentMap;
  }
  return _createClass(WidgetFactory, [{
    key: "setStore",
    value: function setStore(store) {
      this.store = store;
    }
  }, {
    key: "addComponentMapping",
    value: function addComponentMapping(key, component) {
      this.componentMap[key] = component;
    }
  }, {
    key: "updateComponentMapping",
    value: function updateComponentMapping(componentMap) {
      this.componentMap = _objectSpread(_objectSpread({}, this.componentMap), componentMap);
    }
  }, {
    key: "factory",
    value:
    /**
     * Widget configuration is the same we are using in the flexlayout actions
     *
     * { id, name, component, panelName, [instancePath], * } widgetConfig
     */
    function factory(widgetConfig) {
      if (!this.widgets[widgetConfig.id]) {
        this.widgets[widgetConfig.id] = this.newWidget(widgetConfig);
      }
      return this.widgets[widgetConfig.id];
    }

    /**
     * Retrieves all components
     */
  }, {
    key: "getComponents",
    value: function getComponents() {
      var confs = {};
      for (var wid in this.refs) {
        var component = this.refs[wid].current;
        if (component && component.exportSession) {
          confs[wid] = component;
        }
      }
      return confs;
    }

    /**
     * Returns widget matching `widgetId`.
     *
     * @param {string} widgetId specific widget id
     */
  }, {
    key: "getComponent",
    value: function getComponent(widgetId) {
      var _this$refs$widgetId;
      return (_this$refs$widgetId = this.refs[widgetId]) === null || _this$refs$widgetId === void 0 ? void 0 : _this$refs$widgetId.current;
    }

    /**
     * Updates a widget.
     *
     * @param widgetConfig
     */
  }, {
    key: "updateWidget",
    value: function updateWidget(widgetConfig) {
      this.widgets[widgetConfig.id] = this.newWidget(widgetConfig);
      return this.widgets[widgetConfig.id];
    }

    /**
    * Deletes a widget.
    *
    * @param widgetId - The ID of the widget to delete
    */
  }, {
    key: "deleteWidget",
    value: function deleteWidget(widgetId) {
      delete this.widgets[widgetId];
      delete this.refs[widgetId];
    }

    /**
     * Creates a new widget according to `widgetConfig`.
     *
     * @param widgetConfig
     */
  }, {
    key: "newWidget",
    value: function newWidget(widgetConfig) {
      var WidgetToComponent = this.WidgetToComponent;
      return /*#__PURE__*/React.createElement(WidgetToComponent, {
        widgetConfig: widgetConfig
      });
    }
  }]);
}();
export default WidgetFactory;