@haniffalab/cherita-react 0.2.0-dev.2024-09-26.775b9a06 → 0.2.0-dev.2024-09-26.1ea62883

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

@@ -5,29 +5,97 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VarNamesList = VarNamesList;
 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 _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 [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] : 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 [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);
@@ -35,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)(() => {
@@ -47,137 +115,98 @@ 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]);
-  const selectVar = (0, _react.useCallback)(item => {
-    if (mode === _constants.SELECTION_MODES.SINGLE) {
-      dispatch({
-        type: "select.var",
-        var: item
-      });
-      dispatch({
-        type: "set.colorEncoding",
-        value: "var"
-      });
-    } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
-      dispatch({
-        type: "select.multivar",
-        var: item
+  (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;
       });
-    }
-  }, [dispatch, mode]);
-  const removeVar = (0, _react.useCallback)(v => {
-    setVarButtons(b => {
-      return b.filter(i => i.name !== v.name);
+      const newSets = _lodash.default.difference(dataset.varSets, updated);
+      return [...updated, ...newSets];
     });
     if (mode === _constants.SELECTION_MODES.SINGLE) {
-      if (active === v.matrix_index) {
-        dispatch({
-          type: "deselect.var"
-        });
-      }
-    } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
-      if (active.includes(v.matrix_index)) {
+      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: "deselect.multivar",
-          var: v
+          type: "select.var",
+          var: selectedSet
         });
       }
+    } else {
+      dispatch({
+        type: "update.multivar",
+        vars: dataset.varSets
+      });
     }
-  }, [active, dispatch, mode]);
-  const makeList = (0, _react.useCallback)(vars => {
-    return vars.map(item => {
-      if (item && mode === _constants.SELECTION_MODES.SINGLE) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "d-flex gap-1",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "flex-grow-1",
-              children: item.name
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-                icon: _freeSolidSvgIcons.faCircleInfo
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-                type: "button",
-                variant: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR && active === item.matrix_index ? "primary" : "outline-primary",
-                className: "m-0 p-0 px-1",
-                onClick: () => {
-                  selectVar(item);
-                },
-                disabled: item.matrix_index === -1,
-                title: item.matrix_index === -1 ? "Not present in data" : "Set as color encoding",
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-                  icon: _freeSolidSvgIcons.faDroplet
-                })
-              }, item.matrix_index)
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-                type: "button",
-                className: "m-0 p-0 px-1",
-                variant: "outline-secondary",
-                title: "Remove from list",
-                onClick: () => removeVar(item),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-                  icon: _freeSolidSvgIcons.faTrash
-                })
-              })
-            })]
-          })
-        }, item.name);
-      } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "d-flex",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "flex-grow-1",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-                type: "button",
-                variant: item.matrix_index !== -1 && _lodash.default.includes(active, item.matrix_index) ? "primary" : "outline-primary",
-                className: "m-0 p-0 px-1",
-                onClick: () => {
-                  if (active.includes(item.matrix_index)) {
-                    dispatch({
-                      type: "deselect.multivar",
-                      var: item
-                    });
-                  } else {
-                    selectVar(item);
-                  }
-                },
-                disabled: item.matrix_index === -1,
-                title: item.matrix_index === -1 ? "Not present in data" : "",
-                children: item.name
-              }, item.matrix_index)
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              children: [" ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-                icon: _freeSolidSvgIcons.faPlus
-              })]
-            })]
-          })
-        }, item.name);
-      } else {
-        return null;
-      }
-    });
-  }, [active, dataset.colorEncoding, dispatch, mode, removeVar, selectVar]);
-  const varList = (0, _react.useMemo)(() => {
-    return makeList(varButtons);
-  }, [makeList, varButtons]);
-  const diseaseVarList = (0, _react.useMemo)(() => {
-    return makeList(dataset.selectedDisease.genes);
-  }, [makeList, dataset.selectedDisease.genes]);
+  }, [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, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VarItem.VarItem, {
+        item: item,
+        active: active,
+        setVarButtons: setVarButtons,
+        mode: mode,
+        isDiseaseGene: isDiseaseGene
+      })
+    }, 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 => {
+    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", {
-      className: "overflow-auto mt-2",
+      className: "overflow-auto mt-3",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "d-flex justify-content-between",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
-            children: _lodash.default.capitalize(displayName)
+        className: "d-flex justify-content-between",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
+          children: _lodash.default.capitalize(displayName)
+        }), /*#__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: () => {
@@ -185,31 +214,20 @@ function VarNamesList(_ref) {
               dispatch({
                 type: mode === _constants.SELECTION_MODES.SINGLE ? "reset.var" : "reset.multiVar"
               });
+              dispatch({
+                type: "reset.varSets"
+              });
             },
             children: "clear"
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
-          children: varList
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        children: ((_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 ? void 0 : _dataset$selectedDise2.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "d-flex justify-content-between",
-            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
-          }), 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,214 @@
+"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)(_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;
+  }
+}