@haniffalab/cherita-react 0.1.12-dev.2023-12-19.599c72fc → 0.1.12-dev.2023-12-19.edfc4091

package/dist/components/var-list/VarList.js

@@ -5,13 +5,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VarNamesList = VarNamesList;
+exports.VarSearchBar = VarSearchBar;
 require("bootstrap/dist/css/bootstrap.min.css");
 var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
 var _requests = require("../../utils/requests");
 var _DatasetContext = require("../../context/DatasetContext");
 var _constants = require("../../constants/constants");
+var _reactBootstrap = require("react-bootstrap");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -23,26 +31,101 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function VarNamesList(_ref) {
-  var _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? _constants.SELECTION_MODES.SINGLE : _ref$mode;
-  var ENDPOINT = "var/names";
-  var dataset = (0, _DatasetContext.useDataset)();
-  var dispatch = (0, _DatasetContext.useDatasetDispatch)();
+function VarSearchBar(_ref) {
+  var _ref$varNames = _ref.varNames,
+    varNames = _ref$varNames === void 0 ? [] : _ref$varNames,
+    onSelect = _ref.onSelect;
   var _useState = (0, _react.useState)([]),
     _useState2 = _slicedToArray(_useState, 2),
-    varNames = _useState2[0],
-    setVarNames = _useState2[1];
-  var _useState3 = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? null : []),
+    suggestions = _useState2[0],
+    setSuggestions = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    active = _useState4[0],
-    setActive = _useState4[1];
-  var _useState5 = (0, _react.useState)({
+    showSuggestions = _useState4[0],
+    setShowSuggestions = _useState4[1];
+  var _useState5 = (0, _react.useState)(""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    text = _useState6[0],
+    setText = _useState6[1];
+  var getSuggestions = (0, _react.useMemo)(function () {
+    var filter = function filter(text) {
+      if (text.length > 0) {
+        var regex = new RegExp("^".concat(text), "i");
+        var _filter = varNames.sort().filter(function (v) {
+          return regex.test(v.name);
+        });
+        setSuggestions(_filter);
+        setShowSuggestions(true);
+      } else {
+        setShowSuggestions(false);
+      }
+    };
+    return _lodash.default.debounce(filter, 300);
+  }, [varNames]);
+  (0, _react.useEffect)(function () {
+    getSuggestions(text);
+  }, [getSuggestions, text]);
+  var suggestionsList = suggestions.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+      key: item.name,
+      as: "button",
+      onClick: function onClick() {
+        onSelect(item);
+      }
+    }, item.name);
+  });
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Label, null, "Feature:"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
+    onFocus: function onFocus() {
+      setShowSuggestions(text.length > 0);
+    },
+    onBlur: function onBlur() {
+      _lodash.default.delay(function () {
+        setShowSuggestions(false);
+      }, 150);
+    },
+    type: "text",
+    placeholder: "Search for a feature",
+    value: text,
+    onChange: function onChange(e) {
+      setText(e.target.value);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, {
+    style: {
+      width: "90%",
+      maxHeight: "25vh",
+      overflowY: "scroll"
+    },
+    show: showSuggestions
+  }, suggestionsList))));
+}
+function VarNamesList(_ref2) {
+  var _ref2$mode = _ref2.mode,
+    mode = _ref2$mode === void 0 ? _constants.SELECTION_MODES.SINGLE : _ref2$mode;
+  var ENDPOINT = "var/names";
+  var dataset = (0, _DatasetContext.useDataset)();
+  var dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  var _useState7 = (0, _react.useState)([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    varNames = _useState8[0],
+    setVarNames = _useState8[1];
+  var _useState9 = (0, _react.useState)(mode ? mode === _constants.SELECTION_MODES.SINGLE ? [dataset.selectVar] : dataset.selectedMultiVar : []),
+    _useState10 = _slicedToArray(_useState9, 2),
+    varButtons = _useState10[0],
+    setVarButtons = _useState10[1];
+  var _useState11 = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? null : []),
+    _useState12 = _slicedToArray(_useState11, 2),
+    active = _useState12[0],
+    setActive = _useState12[1];
+  var _useState13 = (0, _react.useState)({
       url: dataset.url
     }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    params = _useState6[0],
-    setParams = _useState6[1];
+    _useState14 = _slicedToArray(_useState13, 2),
+    params = _useState14[0],
+    setParams = _useState14[1];
   (0, _react.useEffect)(function () {
     setParams(function (p) {
       return _objectSpread(_objectSpread({}, p), {}, {
@@ -73,45 +156,74 @@ function VarNamesList(_ref) {
       }));
     }
   }, [mode, dataset.selectedMultiVar]);
-  var varList = varNames.map(function (item) {
+  var selectVar = function selectVar(item) {
+    setVarButtons(function () {
+      if (varButtons.find(function (v) {
+        return v.matrix_index === item.matrix_index;
+      })) {
+        return varButtons;
+      } else {
+        return [].concat(_toConsumableArray(varButtons), [item]);
+      }
+    });
     if (mode === _constants.SELECTION_MODES.SINGLE) {
-      return /*#__PURE__*/_react.default.createElement("button", {
-        type: "button",
-        key: item.matrix_index,
-        className: "list-group-item list-grou-item-action ".concat(active === item.matrix_index && "active"),
-        onClick: function onClick() {
-          dispatch({
-            type: "varSelected",
-            var: item
-          });
-        }
-      }, item.name);
+      dispatch({
+        type: "varSelected",
+        var: item
+      });
     } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
-      return /*#__PURE__*/_react.default.createElement("button", {
-        type: "button",
-        key: item.matrix_index,
-        className: "list-group-item list-grou-item-action ".concat(active.includes(item.matrix_index) && "active"),
-        onClick: function onClick() {
-          if (active.includes(item.matrix_index)) {
-            dispatch({
-              type: "multiVarDeselected",
-              var: item
-            });
-          } else {
+      dispatch({
+        type: "multiVarSelected",
+        var: item
+      });
+    }
+  };
+  var varList = (0, _react.useMemo)(function () {
+    return varButtons.map(function (item) {
+      if (mode === _constants.SELECTION_MODES.SINGLE) {
+        return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+          type: "button",
+          key: item.matrix_index,
+          variant: "outline-primary",
+          className: "".concat(active === item.matrix_index && "active", " m-1"),
+          onClick: function onClick() {
             dispatch({
-              type: "multiVarSelected",
+              type: "varSelected",
               var: item
             });
           }
-        }
-      }, item.name);
-    } else {
-      return null;
-    }
-  });
+        }, item.name);
+      } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
+        return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+          type: "button",
+          key: item.matrix_index,
+          variant: "outline-primary",
+          className: "".concat(active.includes(item.matrix_index) && "active", " m-1"),
+          onClick: function onClick() {
+            if (active.includes(item.matrix_index)) {
+              dispatch({
+                type: "multiVarDeselected",
+                var: item
+              });
+            } else {
+              dispatch({
+                type: "multiVarSelected",
+                var: item
+              });
+            }
+          }
+        }, item.name);
+      } else {
+        return null;
+      }
+    });
+  }, [active, dispatch, mode, varButtons]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: ""
-  }, /*#__PURE__*/_react.default.createElement("h4", null, mode), /*#__PURE__*/_react.default.createElement("div", {
-    className: "list-group overflow-auto mh-100"
+  }, /*#__PURE__*/_react.default.createElement("h4", null, mode), /*#__PURE__*/_react.default.createElement(VarSearchBar, {
+    varNames: varNames,
+    onSelect: selectVar
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "overflow-auto mt-2"
   }, varList));
 }

package/dist/context/DatasetContext.js

@@ -123,9 +123,15 @@ function datasetReducer(dataset, action) {
       }
     case "multiVarSelected":
       {
-        return _objectSpread(_objectSpread({}, dataset), {}, {
-          selectedMultiVar: [].concat(_toConsumableArray(dataset.selectedMultiVar), [action.var])
-        });
+        if (dataset.selectedMultiVar.find(function (i) {
+          return i === action.var;
+        })) {
+          return dataset;
+        } else {
+          return _objectSpread(_objectSpread({}, dataset), {}, {
+            selectedMultiVar: [].concat(_toConsumableArray(dataset.selectedMultiVar), [action.var])
+          });
+        }
       }
     case "multiVarDeselected":
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.1.12-dev.2023-12-19.599c72fc",
+  "version": "0.1.12-dev.2023-12-19.edfc4091",
   "author": "",
   "license": "",
   "main": "dist/index.js",
@@ -78,5 +78,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "599c72fcd9f11f112a3d092d041d168864055787"
+  "prereleaseSha": "edfc40913a8d9d9358dda442c8aeb8dc52c10acc"
 }