taxonium-component/dist/AddFiltersDialog-DVq4wJSe.js

React component for exploring large phylogenetic trees in the browser

import { jsxs as t, jsx as r } from "react/jsx-runtime";
import { useState as c, useEffect as m } from "react";
import { o as f, m as p, a as x, D as g, c as y, d as j, B as d } from "./JBrowsePanel-uJIA-L6s.js";
import { j as w } from "./jexlStrings-CYmOwnYU.js";
const F = p()({
  dialogContent: {
    width: "80em"
  },
  textAreaFont: {
    fontFamily: "Courier New"
  },
  error: {
    color: "red",
    fontSize: "0.8em"
  }
});
function v(n) {
  w.stringToJexlExpression(n);
}
const E = f(function({ model: n, handleClose: o }) {
  const { classes: a } = F(), { activeFilters: u } = n, [i, h] = c(u.join(`
`)), [l, s] = c();
  return m(() => {
    try {
      i.split(`
`).map((e) => e.trim()).filter((e) => !!e).map((e) => {
        v(e.trim());
      }), s(void 0);
    } catch (e) {
      console.error(e), s(e);
    }
  }, [i]), t(x.Dialog, { maxWidth: "xl", open: !0, onClose: o, title: "Add track filters", children: [t(g, { children: [t("div", { children: ["Add filters, in jexl format, one per line, starting with the string jexl:. Examples:", " ", t("ul", { children: [t("li", { children: [r("code", { children: "jexl:get(feature,'name')=='BRCA1'" }), " - show only feature where the name attribute is BRCA1"] }), t("li", { children: [r("code", { children: "jexl:get(feature,'type')=='gene'" }), " - show only gene type features in a GFF that has many other feature types"] }), t("li", { children: [r("code", { children: "jexl:get(feature,'score') > 400" }), " - show only features that have a score greater than 400"] }), t("li", { children: [r("code", { children: "jexl:get(feature,'end') - get(feature,'start') < 1000000" }), " ", "- show only features with length less than 1Mbp"] })] })] }), l ? r("p", { className: a.error, children: `${l}` }) : null, r(y, { variant: "outlined", multiline: !0, minRows: 5, maxRows: 10, className: a.dialogContent, fullWidth: !0, value: i, onChange: (e) => {
    h(e.target.value);
  }, slotProps: {
    input: {
      classes: {
        input: a.textAreaFont
      }
    }
  } })] }), t(j, { children: [r(d, { variant: "contained", color: "primary", type: "submit", autoFocus: !0, disabled: !!l, onClick: () => {
    n.setJexlFilters(i.split(`
`)), o();
  }, children: "Submit" }), r(d, { variant: "contained", color: "secondary", onClick: () => {
    o();
  }, children: "Cancel" })] })] });
});
export {
  E as default
};
//# sourceMappingURL=AddFiltersDialog-DVq4wJSe.js.map