@haniffalab/cherita-react 0.2.0-dev.2025-01-22.f523ac5e → 0.2.0-dev.2025-01-28.4d5ab0a4

package/dist/components/search-bar/SearchBar.js

@@ -8,7 +8,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _SearchResults = require("./SearchResults");
-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; }
@@ -26,12 +25,11 @@ function onVarSelect(dispatch, item) {
     value: "var"
   });
 }
-function SearchBar(_ref) {
-  let {
-    searchVar = true,
-    searchDiseases = false,
-    handleSelect = onVarSelect
-  } = _ref;
+function SearchBar({
+  searchVar = true,
+  searchDiseases = false,
+  handleSelect = onVarSelect
+}) {
   const [showSuggestions, setShowSuggestions] = (0, _react.useState)(false);
   const [text, setText] = (0, _react.useState)("");
   const inputRef = (0, _react.useRef)(null);
@@ -41,51 +39,44 @@ function SearchBar(_ref) {
       setShowSuggestions(true);
     }
   }, [text]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form, {
-      onSubmit: e => {
-        e.preventDefault();
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.FormGroup, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Control, {
-          ref: inputRef,
-          onFocus: () => {
-            setShowSuggestions(text.length > 0);
-          },
-          onBlur: () => {
-            _lodash.default.delay(() => {
-              setShowSuggestions(false);
-            }, 150);
-          },
-          type: "text",
-          placeholder: "Search " + displayText,
-          value: text,
-          onChange: e => {
-            setText(e.target.value);
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown, {
-          show: showSuggestions,
-          onMouseDown: e => {
-            e.preventDefault();
-          },
-          onSelect: () => {
-            inputRef.current.blur();
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown.Menu, {
-            style: {
-              width: "90%"
-            },
-            children: [searchVar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchResults.VarSearchResults, {
-              text: text,
-              setShowSuggestions: setShowSuggestions,
-              handleSelect: handleSelect
-            }), searchVar && searchDiseases && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Divider, {}), searchDiseases && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchResults.DiseasesSearchResults, {
-              text: text,
-              setShowSuggestions: setShowSuggestions
-            })]
-          })
-        })]
-      })
-    })
-  });
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
+    onSubmit: e => {
+      e.preventDefault();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
+    ref: inputRef,
+    onFocus: () => {
+      setShowSuggestions(text.length > 0);
+    },
+    onBlur: () => {
+      _lodash.default.delay(() => {
+        setShowSuggestions(false);
+      }, 150);
+    },
+    type: "text",
+    placeholder: "Search " + displayText,
+    value: text,
+    onChange: e => {
+      setText(e.target.value);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, {
+    show: showSuggestions,
+    onMouseDown: e => {
+      e.preventDefault();
+    },
+    onSelect: () => {
+      inputRef.current.blur();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, {
+    style: {
+      width: "90%"
+    }
+  }, searchVar && /*#__PURE__*/_react.default.createElement(_SearchResults.VarSearchResults, {
+    text: text,
+    setShowSuggestions: setShowSuggestions,
+    handleSelect: handleSelect
+  }), searchVar && searchDiseases && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Divider, null), searchDiseases && /*#__PURE__*/_react.default.createElement(_SearchResults.DiseasesSearchResults, {
+    text: text,
+    setShowSuggestions: setShowSuggestions
+  }))))));
 }

package/dist/components/search-bar/SearchResults.js

@@ -10,16 +10,14 @@ var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _DatasetContext = require("../../context/DatasetContext");
 var _search = require("../../utils/search");
-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 VarSearchResults(_ref) {
-  let {
-    text,
-    setShowSuggestions,
-    handleSelect
-  } = _ref;
+function VarSearchResults({
+  text,
+  setShowSuggestions,
+  handleSelect
+}) {
   const [suggestions, setSuggestions] = (0, _react.useState)([]);
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const {
@@ -59,7 +57,8 @@ function VarSearchResults(_ref) {
   }, [fetchedData, isPending, serverError, setShowSuggestions]);
   const suggestionsList = (0, _react.useMemo)(() => {
     return deferredData?.map(item => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+      return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+        key: item.name,
         as: "button",
         disabled: isStale,
         onClick: () => {
@@ -67,32 +66,25 @@ function VarSearchResults(_ref) {
           _lodash.default.delay(() => {
             setShowSuggestions(false);
           }, 150);
-        },
-        children: item.name
+        }
       }, item.name);
     });
   }, [deferredData, dispatch, handleSelect, isStale, setShowSuggestions]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Header, {
-      children: "Features"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        maxHeight: "25vh",
-        overflowY: "scroll"
-      },
-      children: deferredData?.length ? suggestionsList : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
-        as: "button",
-        disabled: true,
-        children: !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data"
-      }, "empty")
-    })]
-  });
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Features"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      maxHeight: "25vh",
+      overflowY: "scroll"
+    }
+  }, deferredData?.length ? suggestionsList : /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+    key: "empty",
+    as: "button",
+    disabled: true
+  }, !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data")));
 }
-function DiseasesSearchResults(_ref2) {
-  let {
-    text,
-    setShowSuggestions
-  } = _ref2;
+function DiseasesSearchResults({
+  text,
+  setShowSuggestions
+}) {
   const [suggestions, setSuggestions] = (0, _react.useState)([]);
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const {
@@ -131,7 +123,8 @@ function DiseasesSearchResults(_ref2) {
   }, [fetchedData, isPending, serverError, setShowSuggestions]);
   const suggestionsList = (0, _react.useMemo)(() => {
     return deferredData?.map(item => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+      return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+        key: item.id,
         as: "button",
         disabled: isStale,
         onClick: () => {
@@ -143,24 +136,18 @@ function DiseasesSearchResults(_ref2) {
           _lodash.default.delay(() => {
             setShowSuggestions(false);
           }, 150);
-        },
-        children: item.disease_name
-      }, item.id);
+        }
+      }, item.disease_name);
     });
   }, [deferredData, dispatch, isStale, setShowSuggestions]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Header, {
-      children: "Diseases"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        maxHeight: "25vh",
-        overflowY: "scroll"
-      },
-      children: deferredData?.length ? suggestionsList : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
-        as: "button",
-        disabled: true,
-        children: !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data"
-      }, "empty")
-    })]
-  });
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Diseases"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      maxHeight: "25vh",
+      overflowY: "scroll"
+    }
+  }, deferredData?.length ? suggestionsList : /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+    key: "empty",
+    as: "button",
+    disabled: true
+  }, !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data")));
 }

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

@@ -17,14 +17,12 @@ var _FilterContext = require("../../context/FilterContext");
 var _Histogram = require("../../utils/Histogram");
 var _requests = require("../../utils/requests");
 var _VirtualizedList = require("../../utils/VirtualizedList");
-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 VarHistogram(_ref) {
-  let {
-    item
-  } = _ref;
+function VarHistogram({
+  item
+}) {
   const ENDPOINT = "var/histograms";
   const dataset = (0, _DatasetContext.useDataset)();
   const {
@@ -53,7 +51,7 @@ function VarHistogram(_ref) {
   } = (0, _requests.useDebouncedFetch)(ENDPOINT, params, {
     refetchOnMount: false
   });
-  return !serverError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Histogram.Histogram, {
+  return !serverError && /*#__PURE__*/_react.default.createElement(_Histogram.Histogram, {
     data: fetchedData,
     isPending: isPending,
     altColor: isSliced
@@ -61,77 +59,47 @@ function VarHistogram(_ref) {
 }
 function VarDiseaseInfoItem(item) {
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
-    className: "feature-disease-info",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        type: "button",
-        className: "btn btn-link",
-        onClick: () => {
-          dispatch({
-            type: "select.disease",
-            id: item.disease_id,
-            name: item.disease_name
-          });
-        },
-        children: item.disease_name
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Table, {
-        striped: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tbody", {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-              children: "Confidence"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-              children: item.confidence || "unknown"
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("td", {
-              children: ["Organ", item.organs.length > 1 ? "s" : ""]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-              children: item.organs.map(o => o.name).join(", ")
-            })]
-          }), !_lodash.default.isEmpty(item.metadata) && _lodash.default.map(item.metadata, (value, key) => {
-            if (value !== null && value !== undefined) {
-              return /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-                  children: key
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-                  children: value
-                })]
-              });
-            }
-          })]
-        })
-      })]
-    })
-  }, item.disease_name);
+  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
+    key: item.disease_name,
+    className: "feature-disease-info"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "btn btn-link",
+    onClick: () => {
+      dispatch({
+        type: "select.disease",
+        id: item.disease_id,
+        name: item.disease_name
+      });
+    }
+  }, item.disease_name), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Table, {
+    striped: true
+  }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, "Confidence"), /*#__PURE__*/_react.default.createElement("td", null, item.confidence || "unknown")), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, "Organ", item.organs.length > 1 ? "s" : ""), /*#__PURE__*/_react.default.createElement("td", null, item.organs.map(o => o.name).join(", "))), !_lodash.default.isEmpty(item.metadata) && _lodash.default.map(item.metadata, (value, key) => {
+    if (value !== null && value !== undefined) {
+      return /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, key), /*#__PURE__*/_react.default.createElement("td", null, value));
+    }
+  })))));
 }
-function VarDiseaseInfo(_ref2) {
-  let {
-    data
-  } = _ref2;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualizedList.VirtualizedList, {
-        getDataAtIndex: index => data[index],
-        count: data.length,
-        estimateSize: 140,
-        maxHeight: "100%",
-        ItemComponent: VarDiseaseInfoItem
-      })
-    })
-  });
+function VarDiseaseInfo({
+  data
+}) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, null, /*#__PURE__*/_react.default.createElement(_VirtualizedList.VirtualizedList, {
+    getDataAtIndex: index => data[index],
+    count: data.length,
+    estimateSize: 140,
+    maxHeight: "100%",
+    ItemComponent: VarDiseaseInfoItem
+  })));
 }
-function SingleSelectionItem(_ref3) {
-  let {
-    item,
-    isActive,
-    selectVar,
-    removeVar,
-    isDiseaseGene = false,
-    showSetColorEncoding = true,
-    showRemove = true
-  } = _ref3;
+function SingleSelectionItem({
+  item,
+  isActive,
+  selectVar,
+  removeVar,
+  isDiseaseGene = false,
+  showSetColorEncoding = true,
+  showRemove = true
+}) {
   const ENDPOINT = "disease/gene";
   const [openInfo, setOpenInfo] = (0, _react.useState)(false);
   const dataset = (0, _DatasetContext.useDataset)();
@@ -149,92 +117,76 @@ function SingleSelectionItem(_ref3) {
     enabled: !!dataset.diseaseDatasets.length
   });
   const hasDiseaseInfo = !isPending && !serverError && !!fetchedData.length;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `d-flex justify-content-between ${hasDiseaseInfo ? "cursor-pointer" : ""}`,
-      onClick: () => {
-        setOpenInfo(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: item.name
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "d-flex align-items-center gap-1",
-          children: [hasDiseaseInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.MoreVert, {}), !isDiseaseGene && /*#__PURE__*/(0, _jsxRuntime.jsx)(VarHistogram, {
-            item: item
-          }), showSetColorEncoding && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-            type: "button",
-            variant: isActive ? "primary" : isNotInData ? "outline-secondary" : "outline-primary",
-            className: "m-0 p-0 px-1",
-            onClick: e => {
-              e.stopPropagation();
-              selectVar();
-            },
-            disabled: isNotInData,
-            title: isNotInData ? "Not present in data" : "Set as color encoding",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-              icon: _freeSolidSvgIcons.faDroplet
-            })
-          }, item.matrix_index), (!isDiseaseGene || !showRemove) && /*#__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();
-              removeVar();
-            },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-              icon: _freeSolidSvgIcons.faTrash
-            })
-          })]
-        })]
-      })
-    }), hasDiseaseInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Collapse, {
-      in: openInfo,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "mt-2 var-disease-info-collapse",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(VarDiseaseInfo, {
-          data: fetchedData
-        })
-      })
-    })]
-  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: `d-flex justify-content-between ${hasDiseaseInfo ? "cursor-pointer" : ""}`,
+    onClick: () => {
+      setOpenInfo(o => !o);
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-between align-items-center w-100"
+  }, /*#__PURE__*/_react.default.createElement("div", null, item.name), /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex align-items-center gap-1"
+  }, hasDiseaseInfo && /*#__PURE__*/_react.default.createElement(_iconsMaterial.MoreVert, null), !isDiseaseGene && /*#__PURE__*/_react.default.createElement(VarHistogram, {
+    item: item
+  }), showSetColorEncoding && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    type: "button",
+    key: item.matrix_index,
+    variant: isActive ? "primary" : isNotInData ? "outline-secondary" : "outline-primary",
+    className: "m-0 p-0 px-1",
+    onClick: e => {
+      e.stopPropagation();
+      selectVar();
+    },
+    disabled: isNotInData,
+    title: isNotInData ? "Not present in data" : "Set as color encoding"
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faDroplet
+  })), (!isDiseaseGene || !showRemove) && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    type: "button",
+    className: "m-0 p-0 px-1",
+    variant: "outline-secondary",
+    title: "Remove from list",
+    onClick: e => {
+      e.stopPropagation();
+      removeVar();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faTrash
+  }))))), hasDiseaseInfo && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Collapse, {
+    in: openInfo
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "mt-2 var-disease-info-collapse"
+  }, /*#__PURE__*/_react.default.createElement(VarDiseaseInfo, {
+    data: fetchedData
+  }))));
 }
-function MultipleSelectionItem(_ref4) {
-  let {
-    item,
-    isActive,
-    toggleVar
-  } = _ref4;
+function MultipleSelectionItem({
+  item,
+  isActive,
+  toggleVar
+}) {
   const isNotInData = item.matrix_index === -1;
-  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: toggleVar,
-          disabled: isNotInData,
-          title: isNotInData ? "Not present in data" : item.name,
-          children: item.name
-        }, item.matrix_index)
-      })
-    })
-  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex-grow-1"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    type: "button",
+    key: item.matrix_index,
+    variant: isActive ? "primary" : "outline-primary",
+    className: "m-0 p-0 px-1",
+    onClick: toggleVar,
+    disabled: isNotInData,
+    title: isNotInData ? "Not present in data" : item.name
+  }, item.name))));
 }
-function VarItem(_ref5) {
-  let {
-    item,
-    active,
-    setVarButtons,
-    mode = _constants.SELECTION_MODES.SINGLE,
-    isDiseaseGene = false
-  } = _ref5;
+function VarItem({
+  item,
+  active,
+  setVarButtons,
+  mode = _constants.SELECTION_MODES.SINGLE,
+  isDiseaseGene = false
+}) {
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const selectVar = () => {
@@ -284,7 +236,7 @@ function VarItem(_ref5) {
     }
   };
   if (item && mode === _constants.SELECTION_MODES.SINGLE) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(SingleSelectionItem, {
+    return /*#__PURE__*/_react.default.createElement(SingleSelectionItem, {
       item: item,
       isActive: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR && active === item.matrix_index,
       selectVar: selectVar,
@@ -292,7 +244,7 @@ function VarItem(_ref5) {
       isDiseaseGene: isDiseaseGene
     });
   } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(MultipleSelectionItem, {
+    return /*#__PURE__*/_react.default.createElement(MultipleSelectionItem, {
       item: item,
       isActive: item.matrix_index !== -1 && _lodash.default.includes(active, item.matrix_index),
       toggleVar: toggleVar