@haniffalab/cherita-react 0.2.0-dev.2024-09-26.d9293c4c → 0.2.0-dev.2024-09-26.ab815be6

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

@@ -5,28 +5,97 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VarNamesList = VarNamesList;
 var _react = _interopRequireWildcard(require("react"));
+var _iconsMaterial = require("@mui/icons-material");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _VarItem = require("./VarItem");
+var _VarSet = require("./VarSet");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
+var _requests = require("../../utils/requests");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function VarNamesList(_ref) {
-  var _dataset$selectedVar, _dataset$selectedDise, _dataset$selectedDise2, _dataset$selectedDise3;
+function DiseaseVarList(_ref) {
+  var _dataset$selectedDise, _dataset$selectedDise3;
   let {
-    mode = _constants.SELECTION_MODES.SINGLE,
-    displayName = "genes"
+    makeListItem
   } = _ref;
+  const ENDPOINT = "disease/genes";
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const [varButtons, setVarButtons] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? dataset.selectedVar ? [dataset.selectedVar] : [] : dataset.selectedMultiVar);
-  const [active, setActive] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? (_dataset$selectedVar = dataset.selectedVar) === null || _dataset$selectedVar === void 0 ? void 0 : _dataset$selectedVar.matrix_index : dataset.selectedMultiVar.map(i => i.matrix_index));
+  const [diseaseVars, setDiseaseVars] = (0, _react.useState)([]);
+  const [params, setParams] = (0, _react.useState)({
+    url: dataset.url,
+    col: dataset.varNamesCol,
+    diseaseId: (_dataset$selectedDise = dataset.selectedDisease) === null || _dataset$selectedDise === void 0 ? void 0 : _dataset$selectedDise.id,
+    diseaseDatasets: dataset.diseaseDatasets
+  });
+  (0, _react.useEffect)(() => {
+    setParams(p => {
+      var _dataset$selectedDise2;
+      return {
+        ...p,
+        diseaseId: (_dataset$selectedDise2 = dataset.selectedDisease) === null || _dataset$selectedDise2 === void 0 ? void 0 : _dataset$selectedDise2.id
+      };
+    });
+  }, [dataset.selectedDisease]);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = (0, _requests.useFetch)(ENDPOINT, params, {
+    enabled: !!params.diseaseId
+  });
+  (0, _react.useEffect)(() => {
+    if (!isPending && !serverError) {
+      setDiseaseVars(fetchedData);
+    }
+  }, [fetchedData, isPending, serverError]);
+  const diseaseVarList = _lodash.default.map(diseaseVars, item => {
+    return makeListItem(item, true);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: dataset.selectedDisease && (!diseaseVars.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
+      variant: "light",
+      children: "No disease genes found."
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "d-flex justify-content-between mt-3",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
+          children: "Disease genes"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+          variant: "link",
+          onClick: () => {
+            dispatch({
+              type: "reset.disease"
+            });
+          },
+          children: "clear"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: (_dataset$selectedDise3 = dataset.selectedDisease) === null || _dataset$selectedDise3 === void 0 ? void 0 : _dataset$selectedDise3.name
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
+        children: diseaseVarList
+      })]
+    }))
+  });
+}
+function VarNamesList(_ref2) {
+  var _dataset$selectedVar, _dataset$selectedVar2, _dataset$selectedVar6, _dataset$selectedVar7;
+  let {
+    mode = _constants.SELECTION_MODES.SINGLE,
+    displayName = "genes",
+    showDiseaseVarList = true
+  } = _ref2;
+  const dataset = (0, _DatasetContext.useDataset)();
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const [varButtons, setVarButtons] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? dataset.selectedVar ? _lodash.default.unionWith([dataset.selectedVar], dataset.varSets, _lodash.default.isEqual) : [...dataset.varSets] : [...dataset.selectedMultiVar, ...dataset.varSets]);
+  const [active, setActive] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? ((_dataset$selectedVar = dataset.selectedVar) === null || _dataset$selectedVar === void 0 ? void 0 : _dataset$selectedVar.matrix_index) || ((_dataset$selectedVar2 = dataset.selectedVar) === null || _dataset$selectedVar2 === void 0 ? void 0 : _dataset$selectedVar2.name) : dataset.selectedMultiVar.map(i => i.matrix_index || i.name));
   (0, _react.useEffect)(() => {
     if (mode === _constants.SELECTION_MODES.SINGLE) {
-      var _dataset$selectedVar2;
+      var _dataset$selectedVar3, _dataset$selectedVar4;
       setVarButtons(v => {
         if (dataset.selectedVar) {
           return _lodash.default.unionWith(v, [dataset.selectedVar], _lodash.default.isEqual);
@@ -34,7 +103,7 @@ function VarNamesList(_ref) {
           return v;
         }
       });
-      setActive((_dataset$selectedVar2 = dataset.selectedVar) === null || _dataset$selectedVar2 === void 0 ? void 0 : _dataset$selectedVar2.matrix_index);
+      setActive(((_dataset$selectedVar3 = dataset.selectedVar) === null || _dataset$selectedVar3 === void 0 ? void 0 : _dataset$selectedVar3.matrix_index) || ((_dataset$selectedVar4 = dataset.selectedVar) === null || _dataset$selectedVar4 === void 0 ? void 0 : _dataset$selectedVar4.name));
     }
   }, [mode, dataset.selectedVar]);
   (0, _react.useEffect)(() => {
@@ -46,9 +115,35 @@ function VarNamesList(_ref) {
           return v;
         }
       });
-      setActive(dataset.selectedMultiVar.map(i => i.matrix_index));
+      setActive(dataset.selectedMultiVar.map(i => i.matrix_index || i.name));
     }
   }, [mode, dataset.selectedMultiVar]);
+  (0, _react.useEffect)(() => {
+    setVarButtons(v => {
+      const updated = _lodash.default.map(v, i => {
+        if (i.isSet) {
+          return dataset.varSets.find(s => s.name === i.name);
+        } else return i;
+      });
+      const newSets = _lodash.default.difference(dataset.varSets, updated);
+      return [...updated, ...newSets];
+    });
+    if (mode === _constants.SELECTION_MODES.SINGLE) {
+      var _dataset$selectedVar5;
+      if ((_dataset$selectedVar5 = dataset.selectedVar) !== null && _dataset$selectedVar5 !== void 0 && _dataset$selectedVar5.isSet) {
+        const selectedSet = dataset.varSets.find(s => s.name === dataset.selectedVar.name);
+        dispatch({
+          type: "select.var",
+          var: selectedSet
+        });
+      }
+    } else {
+      dispatch({
+        type: "update.multivar",
+        vars: dataset.varSets
+      });
+    }
+  }, [mode, dataset.varSets, (_dataset$selectedVar6 = dataset.selectedVar) === null || _dataset$selectedVar6 === void 0 ? void 0 : _dataset$selectedVar6.isSet, (_dataset$selectedVar7 = dataset.selectedVar) === null || _dataset$selectedVar7 === void 0 ? void 0 : _dataset$selectedVar7.name, dispatch]);
   const makeListItem = function (item) {
     let isDiseaseGene = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
@@ -61,12 +156,34 @@ function VarNamesList(_ref) {
       })
     }, item.matrix_index);
   };
+  const makeSetListItem = set => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VarSet.VarSet, {
+        set: set,
+        active: active,
+        mode: mode
+      })
+    }, set.name);
+  };
   const varList = _lodash.default.map(varButtons, item => {
-    return makeListItem(item);
-  });
-  const diseaseVarList = _lodash.default.map(dataset.selectedDisease.genes, item => {
-    return makeListItem(item, true);
+    if (item.isSet) {
+      return makeSetListItem(item);
+    } else {
+      return makeListItem(item);
+    }
   });
+  const newSetName = () => {
+    let n = 1;
+    let setName = "Set ".concat(n);
+    const setNameExists = name => {
+      return dataset.varSets.some(set => set.name === name);
+    };
+    while (setNameExists(setName)) {
+      n++;
+      setName = "Set ".concat(n);
+    }
+    return setName;
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "position-relative",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -75,44 +192,43 @@ function VarNamesList(_ref) {
         className: "d-flex justify-content-between",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
           children: _lodash.default.capitalize(displayName)
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-          variant: "link",
-          onClick: () => {
-            setVarButtons([]);
-            dispatch({
-              type: mode === _constants.SELECTION_MODES.SINGLE ? "reset.var" : "reset.multiVar"
-            });
-          },
-          children: "clear"
-        })]
-      }), !varList.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
-        variant: "light",
-        children: "Search for a feature."
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
-        children: varList
-      }), ((_dataset$selectedDise = dataset.selectedDisease) === null || _dataset$selectedDise === void 0 ? void 0 : _dataset$selectedDise.id) && (!((_dataset$selectedDise2 = dataset.selectedDisease) !== null && _dataset$selectedDise2 !== void 0 && (_dataset$selectedDise2 = _dataset$selectedDise2.genes) !== null && _dataset$selectedDise2 !== void 0 && _dataset$selectedDise2.length) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
-        variant: "light",
-        children: "No disease genes found."
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "d-flex justify-content-between mt-3",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
-            children: "Disease genes"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Button, {
+            variant: "light",
+            className: "p-1",
+            onClick: () => {
+              dispatch({
+                type: "add.varSet",
+                varSet: {
+                  name: newSetName(),
+                  vars: [],
+                  isSet: true
+                }
+              });
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Add, {}), "New set"]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
             variant: "link",
             onClick: () => {
+              setVarButtons([]);
               dispatch({
-                type: "reset.disease"
+                type: mode === _constants.SELECTION_MODES.SINGLE ? "reset.var" : "reset.multiVar"
+              });
+              dispatch({
+                type: "reset.varSets"
               });
             },
             children: "clear"
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-          children: (_dataset$selectedDise3 = dataset.selectedDisease) === null || _dataset$selectedDise3 === void 0 ? void 0 : _dataset$selectedDise3.name
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
-          children: diseaseVarList
         })]
-      }))]
+      }), !varList.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
+        variant: "light",
+        children: "Search for a feature."
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
+        children: varList
+      }), showDiseaseVarList && /*#__PURE__*/(0, _jsxRuntime.jsx)(DiseaseVarList, {
+        makeListItem: makeListItem
+      })]
     })
   });
 }

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

@@ -0,0 +1,222 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VarSet = VarSet;
+var _react = _interopRequireWildcard(require("react"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _iconsMaterial = require("@mui/icons-material");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactBootstrap = require("react-bootstrap");
+var _VarItem = require("./VarItem");
+var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
+var _SearchBar = require("../search-bar/SearchBar");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const addVarToSet = (dispatch, set, v) => {
+  dispatch({
+    type: "add.varSet.var",
+    varSet: set,
+    var: v
+  });
+};
+function SingleSelectionSet(_ref) {
+  let {
+    set,
+    isActive,
+    selectSet,
+    removeSet,
+    removeSetVar,
+    showSearchBar = true
+  } = _ref;
+  const [openSet, setOpenSet] = (0, _react.useState)(false);
+  const varList = set.vars.length ? _lodash.default.map(set.vars, v => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VarItem.SingleSelectionItem, {
+        item: v,
+        showSetColorEncoding: false,
+        removeVar: () => removeSetVar(v)
+      })
+    }, v.name);
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "text-muted",
+      children: "No features in this set"
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "d-flex justify-content-between cursor-pointer",
+      onClick: () => {
+        setOpenSet(o => !o);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "d-flex justify-content-between align-items-center w-100",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: set.name
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "d-flex align-items-center gap-1",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
+            placement: "top",
+            overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Tooltip, {
+              children: "This set represents the mean value of its features"
+            }),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+              icon: _freeSolidSvgIcons.faCircleInfo
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.List, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+            type: "button",
+            variant: isActive ? "primary" : "outline-primary",
+            className: "m-0 p-0 px-1",
+            onClick: e => {
+              e.stopPropagation();
+              selectSet();
+            },
+            disabled: !set.vars.length,
+            title: "Set as color encoding",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+              icon: _freeSolidSvgIcons.faDroplet
+            })
+          }, set.name), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+            type: "button",
+            className: "m-0 p-0 px-1",
+            variant: "outline-secondary",
+            title: "Remove from list",
+            onClick: e => {
+              e.stopPropagation();
+              removeSet();
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+              icon: _freeSolidSvgIcons.faTrash
+            })
+          })]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Collapse, {
+      in: openSet,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "mt-2",
+        children: [showSearchBar &&
+        /*#__PURE__*/
+        // @TODO: fix how results are displayed, should be placed on top of parent components
+        (0, _jsxRuntime.jsx)(_SearchBar.SearchBar, {
+          handleSelect: (d, i) => addVarToSet(d, set, i)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "mx-2",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
+            variant: "flush",
+            children: varList
+          })
+        })]
+      })
+    })]
+  });
+}
+function MultipleSelectionSet(_ref2) {
+  let {
+    set,
+    isActive,
+    toggleSet
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "d-flex",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "flex-grow-1",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+          type: "button",
+          variant: isActive ? "primary" : "outline-primary",
+          className: "m-0 p-0 px-1",
+          onClick: toggleSet,
+          title: set.name,
+          children: set.name
+        }, set.name)
+      })
+    })
+  });
+}
+function VarSet(_ref3) {
+  let {
+    set,
+    active,
+    mode = _constants.SELECTION_MODES.SINGLE
+  } = _ref3;
+  const dataset = (0, _DatasetContext.useDataset)();
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const selectSet = () => {
+    if (mode === _constants.SELECTION_MODES.SINGLE) {
+      dispatch({
+        type: "select.var",
+        var: set
+      });
+      dispatch({
+        type: "set.colorEncoding",
+        value: "var"
+      });
+    } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
+      dispatch({
+        type: "select.multivar",
+        var: set
+      });
+    }
+  };
+  const removeSet = () => {
+    if (mode === _constants.SELECTION_MODES.SINGLE) {
+      if (active === set.name) {
+        dispatch({
+          type: "reset.var"
+        });
+      }
+    } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
+      if (active.includes(set.name)) {
+        dispatch({
+          type: "deselect.multivar",
+          var: set
+        });
+      }
+    }
+    dispatch({
+      type: "remove.varSet",
+      varSet: set
+    });
+  };
+  const removeSetVar = v => {
+    dispatch({
+      type: "remove.varSet.var",
+      varSet: set,
+      var: v
+    });
+  };
+  const toggleSet = () => {
+    if (active.includes(set.name)) {
+      dispatch({
+        type: "deselect.multivar",
+        var: set
+      });
+    } else {
+      selectSet();
+    }
+  };
+  if (set && mode === _constants.SELECTION_MODES.SINGLE) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(SingleSelectionSet, {
+      set: set,
+      isActive: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR && active === set.name,
+      selectSet: selectSet,
+      removeSet: removeSet,
+      removeSetVar: v => removeSetVar(v)
+    });
+  } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(MultipleSelectionSet, {
+      set: set,
+      isActive: _lodash.default.includes(active, set.name),
+      toggleSet: () => toggleSet(set)
+    });
+  } else {
+    return null;
+  }
+}

package/dist/components/violin/Violin.js

@@ -19,7 +19,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function Violin(_ref) {
-  var _dataset$selectedObs, _dataset$selectedObs2, _dataset$selectedObs3;
+  var _dataset$selectedVar, _dataset$selectedVar2, _dataset$selectedVar3, _dataset$selectedVar4, _dataset$selectedObs, _dataset$selectedObs2, _dataset$selectedObs3;
   let {
     mode = _constants.VIOLIN_MODES.MULTIKEY
   } = _ref;
@@ -28,21 +28,31 @@ function Violin(_ref) {
   const [data, setData] = (0, _react.useState)([]);
   const [layout, setLayout] = (0, _react.useState)({});
   const [hasSelections, setHasSelections] = (0, _react.useState)(false);
-  const [params, setParams] = (0, _react.useState)(mode === _constants.VIOLIN_MODES.MULTIKEY ? {
+  const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
-    keys: [],
-    scale: dataset.controls.standardScale,
-    varNamesCol: dataset.varNamesCol
-  } : {
-    url: dataset.url,
-    keys: dataset.selectedVar.index,
-    selectedObs: dataset.selectedObs,
-    obsValues: !((_dataset$selectedObs = dataset.selectedObs) !== null && _dataset$selectedObs !== void 0 && _dataset$selectedObs.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.codes), (_dataset$selectedObs3 = dataset.selectedObs) === null || _dataset$selectedObs3 === void 0 ? void 0 : _dataset$selectedObs3.omit).map(c => {
-      var _dataset$selectedObs4;
-      return (_dataset$selectedObs4 = dataset.selectedObs) === null || _dataset$selectedObs4 === void 0 ? void 0 : _dataset$selectedObs4.codesMap[c];
-    }),
-    scale: dataset.controls.standardScale,
-    varNamesCol: dataset.varNamesCol
+    mode: mode,
+    scale: dataset.controls.scale.violinplot.value,
+    varNamesCol: dataset.varNamesCol,
+    ...{
+      [_constants.VIOLIN_MODES.MULTIKEY]: {
+        varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+          name: i.name,
+          indices: i.vars.map(v => v.index)
+        } : i.index),
+        obsKeys: [] // @TODO: implement
+      },
+      [_constants.VIOLIN_MODES.GROUPBY]: {
+        varKey: (_dataset$selectedVar = dataset.selectedVar) !== null && _dataset$selectedVar !== void 0 && _dataset$selectedVar.isSet ? {
+          name: (_dataset$selectedVar2 = dataset.selectedVar) === null || _dataset$selectedVar2 === void 0 ? void 0 : _dataset$selectedVar2.name,
+          indices: (_dataset$selectedVar3 = dataset.selectedVar) === null || _dataset$selectedVar3 === void 0 ? void 0 : _dataset$selectedVar3.vars.map(v => v.index)
+        } : (_dataset$selectedVar4 = dataset.selectedVar) === null || _dataset$selectedVar4 === void 0 ? void 0 : _dataset$selectedVar4.index,
+        obsCol: dataset.selectedObs,
+        obsValues: !((_dataset$selectedObs = dataset.selectedObs) !== null && _dataset$selectedObs !== void 0 && _dataset$selectedObs.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.codes), (_dataset$selectedObs3 = dataset.selectedObs) === null || _dataset$selectedObs3 === void 0 ? void 0 : _dataset$selectedObs3.omit).map(c => {
+          var _dataset$selectedObs4;
+          return (_dataset$selectedObs4 = dataset.selectedObs) === null || _dataset$selectedObs4 === void 0 ? void 0 : _dataset$selectedObs4.codesMap[c];
+        })
+      }
+    }[mode]
   });
   // @TODO: set default scale
 
@@ -57,8 +67,12 @@ function Violin(_ref) {
         return {
           ...p,
           url: dataset.url,
-          keys: dataset.selectedMultiVar.map(i => i.index),
-          scale: dataset.controls.standardScale,
+          mode: mode,
+          varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+            name: i.name,
+            indices: i.vars.map(v => v.index)
+          } : i.index),
+          scale: dataset.controls.scale.violinplot.value,
           varNamesCol: dataset.varNamesCol
         };
       });
@@ -69,28 +83,32 @@ function Violin(_ref) {
         setHasSelections(false);
       }
       setParams(p => {
-        var _dataset$selectedObs5, _dataset$selectedObs6, _dataset$selectedObs7;
+        var _dataset$selectedVar5, _dataset$selectedVar6, _dataset$selectedVar7, _dataset$selectedVar8, _dataset$selectedObs5, _dataset$selectedObs6, _dataset$selectedObs7;
         return {
           ...p,
           url: dataset.url,
-          keys: dataset.selectedVar.index,
-          selectedObs: dataset.selectedObs,
+          mode: mode,
+          varKey: (_dataset$selectedVar5 = dataset.selectedVar) !== null && _dataset$selectedVar5 !== void 0 && _dataset$selectedVar5.isSet ? {
+            name: (_dataset$selectedVar6 = dataset.selectedVar) === null || _dataset$selectedVar6 === void 0 ? void 0 : _dataset$selectedVar6.name,
+            indices: (_dataset$selectedVar7 = dataset.selectedVar) === null || _dataset$selectedVar7 === void 0 ? void 0 : _dataset$selectedVar7.vars.map(v => v.index)
+          } : (_dataset$selectedVar8 = dataset.selectedVar) === null || _dataset$selectedVar8 === void 0 ? void 0 : _dataset$selectedVar8.index,
+          obsCol: dataset.selectedObs,
           obsValues: !((_dataset$selectedObs5 = dataset.selectedObs) !== null && _dataset$selectedObs5 !== void 0 && _dataset$selectedObs5.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs6 = dataset.selectedObs) === null || _dataset$selectedObs6 === void 0 ? void 0 : _dataset$selectedObs6.codes), (_dataset$selectedObs7 = dataset.selectedObs) === null || _dataset$selectedObs7 === void 0 ? void 0 : _dataset$selectedObs7.omit).map(c => {
             var _dataset$selectedObs8;
             return (_dataset$selectedObs8 = dataset.selectedObs) === null || _dataset$selectedObs8 === void 0 ? void 0 : _dataset$selectedObs8.codesMap[c];
           }),
-          scale: dataset.controls.standardScale,
+          scale: dataset.controls.scale.violinplot.value,
           varNamesCol: dataset.varNamesCol
         };
       });
     }
-  }, [dataset.controls.standardScale, dataset.selectedMultiVar, dataset.selectedObs, dataset.selectedVar, dataset.url, dataset.varNamesCol, mode]);
+  }, [dataset.controls.scale.violinplot.value, dataset.selectedMultiVar, dataset.selectedObs, dataset.selectedVar, dataset.url, dataset.varNamesCol, mode]);
   const {
     fetchedData,
     isPending,
     serverError
   } = (0, _requests.useDebouncedFetch)(ENDPOINT, params, 500, {
-    enabled: mode === _constants.VIOLIN_MODES.MULTIKEY && !!params.keys || mode === _constants.VIOLIN_MODES.GROUPBY && !!params.keys.length && !!params.selectedObs
+    enabled: mode === _constants.VIOLIN_MODES.MULTIKEY && (!!params.varKeys.length || !!params.obsKeys.length) || mode === _constants.VIOLIN_MODES.GROUPBY && !!params.varKey && !!params.obsCol
   });
   (0, _react.useEffect)(() => {
     if (hasSelections && !isPending && !serverError) {
@@ -102,9 +120,7 @@ function Violin(_ref) {
     if (hasSelections) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "cherita-violin position-relative",
-        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
-          children: mode
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
+        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
           data: data,
           layout: layout,
           useResizeHandler: true,

package/dist/components/violin/ViolinControls.js

@@ -4,44 +4,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ViolinControls = ViolinControls;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function ViolinControls() {
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const [activeStandardScale, setActiveStandardScale] = (0, _react.useState)(dataset.controls.standardScale);
-  (0, _react.useEffect)(() => {
-    if (dataset.controls.standardScale) {
-      setActiveStandardScale(_constants.VIOLINPLOT_STANDARDSCALES.find(obs => obs.value === dataset.controls.standardScale).name);
-    }
-  }, [dataset.controls.standardScale]);
-  const standardScaleList = _constants.VIOLINPLOT_STANDARDSCALES.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
-    active: activeStandardScale === item.value,
+  const scaleList = _lodash.default.values(_constants.VIOLINPLOT_SCALES).map(scale => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+    active: dataset.controls.scale.violinplot === scale,
     onClick: () => {
       dispatch({
-        type: "set.controls.standardScale",
-        standardScale: item.value
+        type: "set.controls.scale",
+        plot: "violinplot",
+        scale: scale
       });
     },
-    children: item.name
-  }, item.value));
+    children: scale.name
+  }, scale.value));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonToolbar, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
-          children: "Standard scale"
+          children: "Scale"
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Toggle, {
             id: "dropdownStandardScale",
             variant: "light",
-            children: activeStandardScale
+            children: dataset.controls.scale.violinplot.name
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Menu, {
-            children: standardScaleList
+            children: scaleList
           })]
         })]
       })